jQuery UI pestañas: cómo colocar div con float: left property into tab?

Question

Uso jQuery UI 1.8.16 para pestañas. Quiero colocar en la primera pestaña algunos divs como columnas (con la propiedad float:left).

Pero no puedo hacerlo correctamente: parece que las pestañas no quieren trabajar con la propiedad de flotación de manera adecuada (ver imagen debajo del texto).

Hay código:

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">First</a></li> 
     <li><a href="#tabs-2">Second</a></li> 
     <li><a href="#tabs-3">Third</a></li> 
    </ul> 
     <div id="tabs-1"> 
       <div style="border:1px solid red;float:left;"> 
        some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br> 
       </div> 
     </div> 
     <div id="tabs-2"></div> 
     <div id="tabs-3"></div> 

</div> 

cómo arreglar eso?

Gracias!

Answer 1

Tienes que clear your floats para que el recipiente para calcular la altura adecuada:

<div id="tabs-1"> 
    <div style="border: 1px solid red; float: left;"> 
     some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br> 
    </div> 
    <div style="clear: both;"></div> 
</div> 

se puede ver el resultado en this fiddle.