Question

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, 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?

Answer 1

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>