CSS Floats And Dynamic Content

I have a page which has a nav bar at the top. Within the nav bar there are 2 sets of menus (ul). One set is float left, the other float right. Then below the entire menu开发者_JS百科, is the content, which is in the the flow.

The problem is, the Nav menus are going to have dynamic content. So they need to:

• push the content down as they grow
• can't have a fixed height.

Any way to accomplish this, but the "effect" of the menus floated on opposite side of the page?

add overflow: auto; to the DIV or whatever container element is around the two nav UL's.

#header { overflow: auto; }

<div id="header">
 <ul id="primaryNav">...</ul>
 <ul id="secondaryNav">...</ul>
</div>

<div id="content">...</div>

Use this css and give the parent of those ULs (the nav bar) class clearfix. This way you dont have to specify a fixed height and they will push the content down.

The CSS you need:

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}