Despues de aplicar un float al cuadro de borde rojo, sucede lo siguiente
El ul de las pestañas subio y el div de contenido se puso por debajo del borde inferior del cuadro rojo, y no he podido saber la razon para ello, no soy muy bueno con floats asi que si pueden orientarme les agradeceria, adjunto codigo css y html
HTML
Código PHP:
<div id="container">
<div id="barra-menu">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<div id="info">
<div id="tabContainer">
<ul class="menuTabs">
<li id="datosBasicos" class="activo">Datos basicos</li>
<li id="contacto">Contacto</li>
<li id="infComercial">Informacion comercial</li>
<li id="sistCalidad">Sistema calidad</li>
</ul>
<span class="clear"></span>
<div id="divDatosBasicos" class="contenido datos-basicos">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et feugiat sapien.
Nulla lobortis blandit tortor at commodo. Ut fringilla, neque eget mattis vehicula,
leo turpis auctor orci, vel tempor metus orci ac quam. Phasellus sagittis suscipit est,
</div>
</div>
</div>
</div>
Código PHP:
.clear{
clear: both;
height: 0;
display: block;
}
#tabContainer ul.menuTabs li{
float: left;
margin-right: 5px;
padding: 5px 10px 5px 10px;
background: #efefef;
margin-bottom: -1px;
border: 1px solid #d0ccc9;
border-width: 1px 1px 1px 1px;
position: relative;
color: #898989;
cursor: pointer;
}
.contenido{
background: #efefef;
border: 1px solid #d0ccc9;
text-align: left;
padding: 10px;
font-size: 11px;
}
.contenido.datos-basicos{
display: block;
}
#barra-menu{
border: 1px solid red;
float:left;
width: 160px;
line-height: 18px;
}
#info{
margin-left: 160px;
}
Gracias de antemano, saludos