[jQuery] Tabs plugin in floated container
Happy Friday 13th all ;-)
Just mocking up a new interface and attempting to use floated <div>s for layout.
The right div of two floated next two each other needs to be a tabbed container...but the tabs plugin floats the <li> elements then does a clear:both afterwards which breaks my layout.
I have a feeling I'll be playing with it all afternoon to try and change this, but can anyone assist and point me in the right direction? I like the positioning as it is but just need it to not use floats...
Thanks!
In case it's useful, the code I am using is below.
<br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">CSS:</span><blockquote style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex; font-family: courier new,monospace;" class="gmail_quote">
div#sidebar {
float: left;
width: 15%;
}
div#content {
margin-left: 16%
}
</blockquote><span style="font-family: courier new,monospace;">
HTML:
</span><blockquote style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex; font-family: courier new,monospace;" class="gmail_quote">
<div id='sidebar'>
<div id='content'>
<ul>
<li><a href="#tab-1">Tab 1</a></li>
</ul>
<div id="tab-1">Tab 1</div>
</div>
</div><br clear="all"></blockquote>
Each tab <div> (i.e. "#tab-1" in this instance) will appear *below* the sidebar because of these two tabs styles:
<blockquote style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex; font-family: courier new,monospace;" class="gmail_quote">
.tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
clear: both;
}
.tabs-nav li {
float: left;
}
</blockquote>
Funnily enough it 'works' in IE6 - but this is because the clear:both is broken by the IE-specific style.
--
Rob Desbois
Eml: <a href="mailto:rob.desbois@gmail.com">rob.desbois@gmail.com</a>