DIV contenedor colapsado en Firefox

Rafael · #1 (**permalink**) 28/11/2008, 20:17

Hola a todos. Me está sucediendo algo curioso.

Tengo una estructura base definida por divs.
CABEZA
CUERPO
PIE

Y divs adentro de cada uno de estos para cosas como el menú o el contenido principal.

Lo curioso es que en firefox, el CUERPO se colapsa y el PIE aparece pegado a la cabeza, pero los divs que están dentro de estos (Menu, y un div de texto dentro de pié) Aparecen en su lugar correcto. Los divs colapsados traen principalmente el fondo de la sección.

Dejo unas capturas de pantalla donde se puede ver que la zona grande verde del centro no está, y el fondo rojo grande está hasta arriba:

y dejo un link para que lo vean en vivo:
http://www.otake.com.mx/Duda/

Y el código tal cual de la página.

Código PHP:

  <?xml version="1.0"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html lang="sp" dir="ltr"> 
<head lang="sp" dir="ltr"> 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 
 
<title>Nuevo Documento</title> 
<link rel="stylesheet" type="text/css" href="HojaDeEstilo.css"> 
 
</head> 
 
<body> 
<div id="B-Cabeza"> 
    <div id="Cabeza">Cabeza<br /><br /><br /></div> 
</div> 
 
 
<div id="B-Cuerpo"> 
    <div id="Cuerpo"> 
 
    <div id="Menu"> 
    <a href="#">Tema 123</a><br /> 
    <a href="#">Tema 123</a><br /> 
    <a href="#">Tema 123</a><br /> 
    <a href="#">Tema 123</a><br /> 
    </div> 
     
     
<div id="Contenido"> 
 
    <div id="ColumnaPrincipal"> 
    Contenido 
    <br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1 
    <br />1<br />1<br />1<br />1<br />1<br />1 
    </div> 
 
</div> 
</div> 
</div> 
 
 
 
<div id="B-Pie"> 
    <div id="Pie">Pie 
    </div> 
</div> 
 
</body> 
</html>

Código PHP:

  /* Partes Principales */ 
div#Cabeza, div#Cuerpo, div#Pie {width: 950px; margin: 0 auto;} 
 
div#Cabeza { 
    background-color: #36F; 
    height: 100px;} 
 
div#Cuerpo { 
    background-color: #CF0;} 
 
div#B-Cuerpo { 
    background-color: #CF0;} 
 
div#B-Pie { 
    background-color: #F00; 
    height: 100px;} 
 
div#Pie { 
    background-color: #F99; 
    height: 90px; 
    clear: left;} 
 
 
/* Menú */ 
div#Menu { 
    background-color: #6F6; 
    width: 200px; 
    float: left; 
    text-align: center;} 
 
     
/* Contenido */ 
div#Contenido { 
    width: 750px; 
    float: left;} 
 
div#ColumnaPrincipal { 
    background-color:#AFA; 
    width: 750px;}

Estoy un poco obligado al uso de los float: left, por los famosos fondos de las columnas.. A ver que se les ocurre para evitar el colapso.

Aresillo · #2 (**permalink**) 28/11/2008, 21:51

ponle al :
div#B-Pie {
background-color:#FF0000;
height:100px;
clear:both;
}

Saludos... a mí, así me funciona...

Rafael · #3 (**permalink**) 29/11/2008, 01:22

Gracias. Casi me atropella y no lo ví

El pié ya quedó, pero el cuerpo todavía está desaparecido.

Solo que no le puedo poner un height definido, ya que esta sección es elástica.

¿Una ayudadita adicional?

Aresillo · #4 (**permalink**) 29/11/2008, 04:38

Te refieres a que el menu no llega hasta abajo no?

Aressillo!!

Mikmoro · #5 (**permalink**) 29/11/2008, 10:47

Es el problema de siempre (muy habitual por aquí).
Como las cajas dentro del cuerpo están flotadas no hacen crecer el fondo del cuerpo. Para esto, localiza justo donde cierrra </div> el cuerpo, y justo antes añade esto:

<div class="corte"></div>

y ahora añade a la css:

.corte {clear: both;}

safe · #6 (**permalink**) 29/11/2008, 15:34

Prueba con:

Código HTML:

div#B-Cuerpo {
    background-color: #CF0;
    float:left;
    width:100%;
}

Rafael · #7 (**permalink**) 29/11/2008, 17:16

Ok, ok, voy a probar las opciones de Mikmoro y Safe, gracias... (Aunque según yo el width lo tengo asignado en mi hoja original, antes de recortarle para simplificarla) Voy a ver. :D

Aresillo, lo del menú que no llega hasta abajo, es como siempre el problema inicial. Como lo estaba resolviendo es asignando el fondo en el elemento contenedor, Justo el que está colapsado. Un mapa de bits con repeat-y.

¡Pero si se puede resolver con otra opción es bienvenida!.

Rafael · #8 (**permalink**) 29/11/2008, 17:29

Mikomoro, el artífice, funcionó bien ¡gracias!

(Reflexionando un poco acerca del tema, considero que es un error de implementación en Firefox el hecho que la caja contenedora no crezca y se mantenga con el contenido flotado.
¿No les parece?)

Mikmoro · #9 (**permalink**) 29/11/2008, 18:02

No creo, fíjate que la palabra "float" es muy gráfica, y en cierto sentido flota sobre el flujo del documento y no ocupa espacio fisico, por eso su contenedora no crece.

Además, esto ocurre en todos excepto en IE.

Rafael · #10 (**permalink**) 29/11/2008, 18:13

El float, (pienso yo) debería ser algo semejante al relative, donde este si afecta al flujo del contenedor. ¿Como si afecta al flujo de los elementos inline, como un texto, y es ignorado por el contenedor?.

Bueno es solo una opinión. De todos modos me acostumbraré a usar el divpin (Je, más que corte se me hace como un alfiler para estirar el contenedor)

Mikmoro · #11 (**permalink**) 29/11/2008, 18:27

Bueno, esto dice exactamente la especificación CSS2:

Cita:

Puesto que un flotante no está en el flujo, las cajas de bloque no posicionadas creadas antes y después de la caja flotante fluyen verticalmente como si el flotante no existiera. Sin embargo, las cajas de línea creadas al lado del flotante son acortadas para darle espacio a la caja flotante.

Rafael · #12 (**permalink**) 29/11/2008, 18:50

Hum... Ok. Aunque el antes y después versus al lado es un poco relativo, ya que todo documento de texto es lineal en escencia. Para que un texto fluya a un objeto flotado debe de aparecer después del elemento flotado.

Aunque lo que queda un poco vago en la especificación es no los elementos de arriba-abajo, sino los internos-externos. No creo que se refiere a esto, con el antes y después, ya que el interno está realmente contenido por la caja flotada. No está ignorando su posición, va con ella.

Rafael · #13 (**permalink**) 29/11/2008, 18:57

Hum, ya vi la razón de eso, Arriba del punto 9.51 de la especificación. Saludos.

Mikmoro · #14 (**permalink**) 29/11/2008, 19:07

Cita:

Iniciado por Rafael

Hum... Ok. Aunque el antes y después versus al lado es un poco relativo, ya que todo documento de texto es lineal en escencia. Para que un texto fluya a un objeto flotado debe de aparecer después del elemento flotado.

Yo creo que no se refiere a "al lado", sino realmente a antes y después en el flujo.

"las cajas de bloque no posicionadas creadas antes y después de la caja flotante fluyen verticalmente como si el flotante no existiera"

Cita:

Iniciado por Rafael

Aunque lo que queda un poco vago en la especificación es no los elementos de arriba-abajo, sino los internos-externos. No creo que se refiere a esto, con el antes y después, ya que el interno está realmente contenido por la caja flotada. No está ignorando su posición, va con ella.

Pero no estamos hablando del contenido de una caja flotada, sino todo lo contrario: cómo una caja flotada (como contenido de), afecta a su contenedora, por lo tanto lo importante es su propio comportamiento, no el de su contenido.