Div collapse after float css

Question

I have a div called NAV and inside of NAV I have an UL with 5 li which I float to the left, the li's that is but when I do that the NAV collapses. I know this because I put a border around NAV to see if it collapses and it does. Here is the example.

collapsed http://img401.imageshack.us/img401/8867/collapsedze4.png

no collapsed http://img71.imageshack.us/img71/879/nocollapsedkx7.png

as you can see in the first image, the links in the NAV div are floated left and that black border ontop is the actual div called NAV.

in this image you can see how it has top and bottom border and it not collapsed.

here is some of the html and css I used.

alt text http://img301.imageshack.us/img301/5514/codejc8.png

#nav #ulListNavi  a  {
    float: left;
}

Answer 1

Add any overflow value other than visible to your container:

div#nav { overflow:auto; }

Then add width to restore the width

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

Answer 2

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.