Problema con listas en Float entre IE y Firefox

[gurdjieff]

Hola a todos, no consigo solucionar el problema que tengo.
Tengo una lista dividida en dos divs, una con float right y otra con float left, dentro de un div contenedor.
El problema es que Firefox no desplaza hacia abajo el div contenedor (en la deccion INICIO), mientras que IE si lo hace.

En la hoja de estilo tengo:

div#content {
position:relative;
background-color:#FFFFFF;
width:780px;
left:0;
top:-40px;
z-index:0;
padding:40px 0px 20px 0px;
}

div#lateralI {
width:50%;
float:left;

}

div#lateralD {
width:50%;
float:right
}



En el Html :

<div id="content">

<div id="lateralI">

<ul class="bullets2">

<li id="listacomun">Marcopolo</li>

<li id="listacomun">Laboratorios Roemmers</li>

<li id="listacomun">Hidromet SA</li>

<li id="listacomun">Meditecna</li>

<li id="listacomun">Tecna</li>

<li id="listacomun">Grupo Sur (Volkswagen)</li>

<li id="listacomun">Amstrong </li>

<li id="listacomun">Pol-Ka Producciones </li>

<li id="listacomun">Preven-Arc </li>

<li id="listacomun">Laboratorios Montpellier</li>

<li id="listacomun">MTS Group</li>

<li id="listacomun">Schüco </li>

<li id="listacomun">Endemol Argentina</li>

<li id="listacomun">Lo-Jack</li>

</ul>

</div>


<div id="lateralD">

<ul class="bullets2">

<li id="listacomun">la embajada de Bélgica</li>

<li id="listacomun">Quinta Los Ceibos </li>

<li id="listacomun">Estancia San Ceferino</li>

<li id="listacomun">Estancia La Suiza </li>

<li id="listacomun">Chacra El Rancho </li>

<li id="listacomun">Asociación de Escuelas Lincoln</li>

<li id="listacomun">Escuela Argentina Modelo</li>

<li id="listacomun">Drink Catering </li>

<li id="listacomun">Outlet Bar</li>

<li id="listacomun">Hotel Faena</li>

<li id="listacomun">Hotel Alvear </li>

<li id="listacomun">Eat Catering </li>

<li id="listacomun">Alfredo Schuster</li>

<li id="listacomun">Marta Chab </li>

</ul>

</div>

</div>


Les dejo el link para que lo vean si pueden:

http://www.uniweb.cl/jose.gutierrez


Muchas gracias anticipadamente

[marce_str]

Veo que lo solucionaste pero te lo explico igual

En Firefox ocurre que los elementos flotantes no influyen en el flujo del contenido, es decir, no rellenan, por lo que hay que colocar un elemento que despeje todo. Generalmente se le llama "clearfix" aunque le podes poner cualquier nombre, como limpia, despeja, estira... :p

.clearfix {clear:both;}


y en el html, después de los elementos que tengan float poné
<div class="clearfix"></div>

con esto alcanza


Aprende a crear siempre esa clase para reutilizarla siempre, ya que puedes necesitarla varias veces en muchos proyectos.

Saludos!