Rob Desbois wrote:
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.
CSS:
div#sidebar {
float: left;
width: 15%;
}
div#content {
margin-left: 16%
}
HTML:
<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>
Each tab <div> (i.e. "#tab-1" in this instance) will appear *below* the
sidebar because of these two tabs styles:
.tabs-nav:after { /* clearing without presentational markup, IE gets
extra treatment */
clear: both;
}
.tabs-nav li {
float: left;
}
Funnily enough it 'works' in IE6 - but this is because the clear:both is
broken by the IE-specific style.
Rob, I tried to reproduce that behavior to come up with a solution, can
it be that the HTML you posted here isn't correct?
The way it is I don't have any problems but also don't get the point.
Shouldn't it look like:
<div id="sidebar"></div>
<div id="content">
<ul>
<li><a href="#tab-1">Tab 1</a></li>
</ul>
<div id="tab-1">Tab 1</div>
</div>
?
--Klaus
