Question

I have a top nav area with two UL. One floated left, one floated right.

In IE7 the right floated UL seems to stretch all the way to the left taking up the entire space available. In IE8 and more current browsers, of course its fine… they only expand the width of the content in the LI.

example:

IE7

<---Floated left UL---><----------------------------Floated right UL--->

in IE8
<---Floated left UL--->                         <---Floated right UL--->

I have tried dabbling with min width, and width, but cant seem to get it right…
Is this just a default behavior for IE7 to take up the entire width, unless specified with a set width of pixels, or percent.

Answer 1

Give the floated elements either a width (preferable) or display:inline.

Style

.nav {display:inline; background:#CCC;}
ul.nav li {display:inline; margin:0 0.1em;}
#nav1 {float:left;}
#nav2 {float:right;}

HTML

<ul id="nav1" class="nav">
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
</ul>
<ul id="nav2" class="nav">
    <li>Sit amet</li>
    <li>Consectetur</li>
    <li>Adipiscing</li>
</ul>

Obviously you’ll want to style the lists more; I provided some styling for context. BTW, IE doesn’t recognize min-width.