jQuery UI tab not sizing to content

I found a quirk in jQuery UI. If the contents of your tab are styled with the CSS attribute float: then the tab does not resize to fit the content. This can be fixed quite simply by adding an additional div with a clear:both style after it. This is an a example:

<div id="tabs" style="display:block">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
        <li><a href="#tabs-3">Tab 3</a></li>
    </ul>
    <div id="tabs-1" style="width:100%;  display:block; ">
         <div style="width:40%; position:relative; display:inline-block; float:right;"> 
         <div style="width:40%; position:relative; display:inline-block; float:left;"> 
         <div style="width:100%; clear:both"></div>
    </div>
    <div id="tabs-2" style="width:100%; display:block; ">

     Content of tab 4
   
    </div>
    <div id="tabs-3" style="width:100%; display:block;">
 
     Content of tab 3
    </div>

</div>  

I’m just mentioning it here as the only other place I could find that had anything about this said that jQuery tabs could not support floating content.

This applies to jQuery UI 1.8.11 (and presumably above!).

Advertisements