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 Desbois Eml: [EMAIL PROTECTED]