Question

Possible Duplicate:
How to fit a div’s height to wrap around its floated children

I want to have a <ul> inside of a <div> with a bunch of floated <li>. Only problem is that the containing <div> collapses to be 0px tall. How do I make the <div> keep its height as if it contained the <li>?

HTML:

<div>
   <ul>
      <li>stuff</li>
      <li>morestuff</li>
   </ul>
</div>

CSS:

div {
background: rgb(90, 90, 90);
}

ul {
color: red;
}

li {
float: left;
clear: none;
margin-right: 10px;
}

If using floats is old-fashioned and you know a better style, let me know!

Answer 1

Option 1 (recommended): Give the div style overflow:hidden; which will correct its height.

Option 2: Alternatively add a clearer div to the end of your current div

<div>
   <ul>
      <li>stuff</li>
      <li>morestuff</li>
   </ul>
   <div style="clear:both;"> </div>
</div>

jsFiddle Demo

Edit: To clarify, both of the above have complete cross browser support and require no hacks or invalid CSS.