Ayuda con menu css

[LinkLooker]

Saludos, estoy haciendo un pequeño sitio y me he topado con un problemilla al comenzar a hacer el menu (horizontal).

El asunto es que cuando le coloco la propiedad float: left a los elementos <li> del menu me desparece el div contenedor donde este se encuentra, descuadranadome el diseño y moviendo otros div que no deberian moverse...

Para mejor entendimiento

Acá dejo el código HTML:

<div id="todo">
<div id="superior">
<div id="header"></div>
</div>

<!--Comienzo Menú-->

<div id="menu">
<ul id="nav">
<li>Calendario</li>
<li>Rankin Nacional</li>
<li>Fotos</li>
<li>Videos</li>
<li>Contactenos</li>
</ul>
</div>
<!--Fin MEnu-->

<div id="izq">Izquierdo</div>
<div id="centro">Centro</div>
<div id="derecho">
<div id="encabezados">Redes Sociales</div>
<div id="logos"><img src="imagenes/social/facebook.jpg" alt="Facebook" /> <img src="imagenes/social/twitter.jpg" /></div></div>

</div>
</body>
</html>

Codigo CSS:

#todo {
margin: 0 auto 0 auto;
text-align:center;
width:900px;
border:#999999 solid 1px;
height:600px}

#header {
width: 100%;
height:100px;
background-image:url(imagenes/header-crbel.png) }



#menu { background-color:#0066FF; margin: 10px 0px 10px 0px;}

#nav { list-style:none; margin: 0; padding:0; }

#nav li { margin: 2px; padding: 0; float:left }

#izq { width:50%; background-color:#333333; float:left; }

#centro { width:20%; background-color:#666666; float:left; margin: 0px 5% 0px 5%}

#derecho {width:20%; background-color:#999999; float:left; }

#encabezados {width:100%; background-color:#FFFFFF; margin: 10px 0px 10px 0px; float:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:16px}

#textoderecho {float: left}



Gracias de antemano por la ayuda suministrada

[sanxuan]

añade la propiedad clear:both; dentro de la declaración #izq { }.

[rasfuranku]

Colocale un height y un widht al div contenedor del menú, por lo general cuando no tienen estas propiedades los navegadores los ignoran, tambien te recomiendo la extensión firebug para que puedas ver como leé tú codigo el navegador.

Espero te sirva, Saludos...

[LinkLooker]

Gracias, lo habia probado pero poniendolo en otro div....Y al div que se desaparecia lo coloque height y listo..

Muy amable de tu parte..


Suerte!!!

[ArturoGallegos]

ahorita ya lo hiciste con un clear:both y quedo perfecto hasta donde entendí

solo como referencia en algunos casos no es muy viable o limpio utilizar un la propiedad clear:both y en tu caso del menú también se podía solventar cono un overflow:hidden sobre la id menu

[kseso?]

Iniciado por Ag666

ahorita ya lo hiciste con un clear:both y quedo perfecto hasta donde entendí

solo como referencia en algunos casos no es muy viable o limpio utilizar un la propiedad clear:both y en tu caso del menú también se podía solventar con un overflow:hidden sobre la id menu

+1
Estamos ante el típico efecto de los elementos flotados que no hace crecer a su contenedor.