JQuery UI tabs: how to place div with float: left property in tab?

Question

I am using jQuery UI 1.8.16 for tabs. I want to place several divs in the form of columns in the first tab (with the float:left property).

But I can’t do it right: the tabs don't seem to want to work with the float property correctly (see the image under the text).

There is a code:

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

How to fix it?

Thanks!

Answer 1

You must clear your floats so that the container calculates the desired height:

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

You can see the results in this violin .