problemas firefox float clear both

[piojoso]

tengo las siguientes divisiones

Código:

<div id="cuerpo">
    <div id="lateral">
    Contenido    
    </div>
    <div id="derecha">
    Contenido    
    </div>
    <div id="principal">
    Contenido
    </div>
</div>

con el siguiente style

Código:

#cuerpo{ 
   background-color: #EEE999;
   margin: 10 0 10 0px; 
} 
#lateral{ 
   background-color: #FFF999;
   margin-left: 10px;  
   width: 170px;
   float:left;
   clear: both;
} 
#principal{ 
   background-color: #FFF111;
   margin-left: 180px;
   margin-right: 180px;
}
#latder{
   background-color: #FFF999;
   width: 170px;
   float: right;
   margin-right: 10px;
   clear: both; 
}

en iexplorer 7.0 (se visualiza bien)
piojosoft.com/iexplorer.jpg

en firefox y crhome (div latder se baja hasta la altura del pie de div lateral)
piojosoft.com/firefox.jpg

en iexplorer 6.0 el contenido del div principal baja hasta la altura del pie de div lateral. dejando todo el espacio en blanco en el medio.


en firefox cualquier float cerrado por un clear both que coloque dentro de una caja dentro del div principal arrastra todo el contenido que se encuentra por debajo del clear both hasta el pie del div lateral.

alguna solucion?

[lemattma]

Juega con el width del div principal, por eso se te va hacia abajo por que 'no tiene espacio', recuerda que el margen, borde, y padding tb son parte del ancho.

[talmente]

Los nombres de los div no son los mismos en el html y el css, en cualquier caso prueba esto.

Código:

#cuerpo {
	float: left;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	background: #0099FF;
}
#cuerpo #derecha {
	background: #CC0000;
	float: right;
	width: 25%;
}
#cuerpo #lateral {
	float: left;
	width: 25%;
	background: #CC6600;
}
#cuerpo #principal {
	background: #CCCCCC;
	width: 49.9%;
	float: left;
}
.pie {
	
	background: #003399;
	padding-top: 5px;
	padding-bottom: 5px;
	float: left;
	width: 100%;
}
html>body #cuerpo #principal {
	background: #CCCCCC;
	width: 50%;
	float: left;
}

Código:

<div id="cuerpo">
    <div id="lateral">
      <p>Lateral</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;  </p>
    </div>
  <div id="derecha">
    <p>derecho</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>
    <div id="principal">
      <p>principal</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;  </p>
    </div>
</div>
<div class="pie"></div>

[piojoso]

no pasa por el tamaño de las divisiones, el problema es con el float y clear both en firefox.

arrastra todo con both hasta el ultimo float.

y lo tengo que utilizar al C:both para que las float de algunas imagenes con texto al lado no queden afuera de las cajas (cajas dentro del div principal).

pueden verlo en piojosoft.com en firefox como arrastra todo.