Klaus Hartl wrote:

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!

Rob, does it help if you declare float for the ul as well?

.tabs-nav {
    float: left;
}

Depending on how the tabs shall look like you could also clear by declaring overflow for the ul, like:

.tabs-nav {
    overflow: hidden;
}

Works in all modern browsers except for IE 6.

But that breaks the relative positioning, e.g. pushing the active tab on top of the bottom border (this is why I said it depends on how tabs shall look like).

Alternatively you may declare a height for the ul and do not clear at all...

Getting around the float will be hard, although doable (via display: inline-block, or display: table-cell)


--Klaus

Reply via email to