Have a `<div>` keep its height with floated children [duplicate] - html

Question

This question already has answers here:
Closed 10 years ago.
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.

Answer 2

Try Display:inline-block;
li {
display:inline-block;
margin-right: 10px;
}
Demo
Cross Browser Inline-Block

Answer 3

To fix your exact problem:
div {
background: rgb(90, 90, 90);
overflow: auto;
}
Maybe a less "old-fashioned" method:
div {
background: rgb(90, 90, 90);
}
ul {
color: red;
}
li {
display: inline-block;
*vertical-align : auto;
*display: inline; // targets IE7 and such, same effect
margin-right: 10px;
}
You will need to adjust your margin-right on the li element to match your exact specs. It's still cool to use floats, but why bother when display: inline-block will solve most of what you want???
PS: Sometimes IE hacks are ok -- I suggest using a preprocessor like Sass with a library like Compass to help you manage them.
A couple articles on the issue:
http://www.vanseodesign.com/css/inline-blocks/
http://www.onderhond.com/blog/inline-block-vs-float

Answer 4

Whenever you are using FLOAT property don't forgot to add clear property also
you can try this
<div>
<ul>
<li>stuff</li>
<li>morestuff</li>
<li style="clear:both;float:none"></li> <!-- Added Clear, removed float -->
</ul>
</div>​​​​​​​​​​​​​​​​