There’s a somewhat confusing problem that can happen if you want to use a multi column (floated div) chunk of content for a tab in JQuery UI tabs.
Basically, the floats inside the tab container cause the tab container to lose it’s height, making your content appear outside of the tab box.
Let us assume our code looks something like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<style> .twocol { min-width: 500px; width: 500px; max-width: 500px; float: left; } </style> <script type="text/javascript"> $(function() { $('#myTabs').tabs(); }); </script> <div id="myTabs"> <ul> <li><a href="">Home</a></li> <li><a href="">Another tab</a></li> </ul> <div id="s_welcome"> <div class="twocol">Content</div> <br /> <div class="twocol">More content</div> </div> <div id="s_another_tab"> Banana </div> </div> |
The problem is that the floats inside the tab container cause the tab container height to be incorrect (Shown via Firefox)
The solution to this, was to apparently make the tab container float as well, by adding a float:left; width: 100%; to the ‘myTabs‘ div; making the content all appear correct.
End result css:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<style> .twocol { min-width: 500px; width: 500px; max-width: 500px; float: left; } #myTabs { float:left; width: 100%; } </style> |
