Div collapse after float css

Answer 1

Try floating the containing element to the left too.

Answer 2

add this code after your ul:

<div style="clear: both"></div>

Answer 3

One solution is to add a "clear:both" style to an element after the last floated anchor, for instance:

<div id="nav">
  <ul id="ulListNavi">
    <li><a href="#">Home</a></li>
    <li><a href="#">Search</a></li>
    <li><a href="#">Flowers</a></li>
    <li><a href="#">My Account</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
  <div style="clear:both;"></div>
</div>

This causes the containing element to clear all floating elements before closing the containing box.

Answer 4

A few other options for clearing floats here:

http://www.quirksmode.org/css/clearing.html

http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

As to the best way of doing it, that's almost a holy war, the purists would freak about the extra div, if you are not fussed by a little extra markup, the addition of the cleared div as suggested by Joshua and AJ will work fine, and is a reliable technique, but there are at least 17 other ways of doing it...

Answer 5

Add width and overflow to your container:

div#nav { width: 100%; overflow:auto; }

Answer 6

Without changing your HTML:

#nav
{
    width: 100%;
    overflow: auto;
    border: solid 1px red;
}
#ulListNavi
{
    margin: 0;
    padding: 0;
    list-style: none;
}
#nav #ulListNavi li
{
    float: left;
}
#nav #ulListNavi li a
{
    margin-left: 5px;
}

Works in IE8 and FF 3.5

Answer 7

Don't bother with clearing elements or overflow. Add this:

#nav {
    float: left;
}

When you float the LI's, the #nav no longer "contains" anything so it collapses. But if the #nav is floated also, it contains anything floated inside it, so it expands again.

(Also consider removing the #nav div and just applying the same styles to the UL.)

Answer 8

Check for more understanding fix-for-floating-div