problema con floats y divs

[Rosencrantz]

hola a todos tengo el siguiente problema, tengo la sigueinte estructura HTML, tan solo dos simples divs uno hara de menu lateral el otro de contenido, a su vez el de contenido posee una <ul> para crear unas pestañas y un div para mostrar la informacion de cada pestaña, hasta aca sin aplicar ningun float la pagina se ve de la siguiente manera:



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>  
   

CSS

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;             
}  
   

Mi duda es con los floats o el clear creo que el problema es por ahi pero no estoy seguro.

Gracias de antemano, saludos

[David]

Eso sucede debido a ese <span> que tienes ahí (clear: both).

Podrías intentar usar display: inline para mostrar los "tabs" en una misma línea en lugar de flotarlos. Así puedes quitar ese <span>.

[Rosencrantz]

funciona perfecto man mil gracias!
Saludos.