Schede dell'interfaccia utente jQuery: come posizionare div con float: proprietà left in tab?

Question

Io uso l'interfaccia utente JQuery 1.8.16 per le schede. Voglio inserire nella prima scheda pochi div come colonne (con proprietà float:left).

Ma non riesco a farlo correttamente: sembra che le schede non vogliano lavorare con le proprietà float in modo corretto (vedere l'immagine sotto il testo).

C'è Codice:

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

Come risolvere questo?

Grazie!

Answer 1

dovete clear your floats in modo che il contenitore per calcolare l'altezza corretta:

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

si possono vedere i risultati in this fiddle.