propiedad FLOAT en DIVs anidados (problemas)

[smokecitizen]

Qué tal, me encuentro creando un theme para mi blog en wordpress, pero ha surgido un problema al generar el código para el footer (Pie de página)

Les explicaré grosso modo como está.

Estoy buscando algo semejante a lo que manejan en
el sitio de Shaun Inman
con los divs de cabeza/pie de página retráctiles

A mí me interesa solo un footer, para esto tengo un DIV de 900px de ancho y un color de fondo (distinto al del resto de mi web) llamado PIE, el cual consta de 4 columnas, busco apegarme a los estandares por lo que no uso tablas para esto, sino que cada columna es un DIV el cual coloco de forma consecutiva usando la propiedad FLOAT, pero descubrí que al usar dicha propiedad, los DIVs (columnas) se vuelven de alguna forma independientes del DIV principal (llamado PIE) por lo que al cambiar la extensión de los contenidos de las columnas, el DIV principal (llamado PIE), no se redimensiona al lenght de las columnas, por lo que el color del fondo no abarca toda la extensión de las columnas, a menos que le predefina un lenght superior al de la columna más extensa, pero son contenidos dinámicos y no siempre tendrán la misma extensión.


Espero haberme hecho entender y me puedan dar una ayuda antes de volverme -más- loco!


Saludos y gracias de antemano

[Hereje]

Lo puedes solucionar poniendo un div con un clear luego de estas cuatro columnas:

Código:

.clear {
  clear: both;
}

Código:

<div id="pie">
  <div class="columna"></div>
  <div class="columna"></div>
  <div class="columna"></div>
  <div class="columna"></div>
  <div class="clear"></div>
</div>

También puedes jugar seteando en la ultima columna float:none.

Fijate a ver que pasa, saludos!

[smokecitizen]

Muchas gracias :D ha quedado bien con la propiedad clear:both !!

[Jorolo]

Hola a todos.

Esta consulta es un clasico, se ha hecho mil veces y seguro que seguirá haciendose.

Nunca lo he entendido y puede que nunca lo entienda.

Las propiedades float y clear son mutuamente dependientes. no tienen sentido la una sin la otra. El estándar tiene un capítulo específico para ellas dos.
http://www.sidar.org/recur/desdi/tra...en.html#floats

¿Como puede alguien saber usar float y no saber usar clear?
¿Que manuales leeis?

Hola smokecitizen, no te lo tomes como una crítica.

[smokecitizen]

No, para nada lo tomo a mal, de hecho creo que no comenté, pero es la primera vez que me intereso a hacer código apegado a los estándares, esto no es lo que me da de comer, más bien es un pasatiempo y la última vez que hice un sitio fue por ahí del 2000, antes de que usara Firefox, incluso antes de que me interesaran los estandares (decía "se ve bien en IE, ps con eso vale") durante ese periodo de "descanso" si bien ya no hice web, seguí leyendo websites, artículos, siguiendo blogs del tema, entre otras cosas, no he leído libros como tal, voy más bien del lado práctico, comienzo a involucrarme como se debe en algo hasta que le doy uso, y de ahí empiezo a urgar más y más, quizá no es lo más adecuado, pero como he dicho es mero pasatiempo =D

Y pues con la Especificación CSS (que ya conocía de hace tiempo pero en su versión en inglés) de la que se extrae el capítulo que me mencionas, me irá a la perfección ahora que me gustaría involucrarme más, a proposito de esto... sabes si existe alguna versión impresa de dicha especificación? o alguna versión empaquetada en PDF o DOC lista para imprimir? y por otro lado... algun libro adecuado para comenzar?

[Jorolo]

Hola de nuevo.


El tercer parrafo: Formatos disponibles

... y aquí tienes css2.1
http://www.w3.org/Style/css2-updates/translations.html

[smokecitizen]

Muchas gracias