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