Clearing a floated <li> correctly

height css-float w3c-validation
Katzenfresser picture Katzenfresser · Feb 5, 2011 · Viewed 8.5k times · Source

i dialy deal with float: left; and the CSS-reset by Eric Meyer with class="clearfix". But there is one special case, i wonder how to clear a floatd element correctly: Within <ul> ... </ul>.

Wrong height of the <ul> though using a clearer. The clearer should be within the <ul>. Let's try ...

Correct height, but the HTML-code ist not valid!

How can i clear the float within the <ul> with valid code?

Thanks, Johannes

Answer

Yi Jiang picture Yi Jiang · Feb 5, 2011

Simply add overflow: hidden to the ul element's ruleset. Search for 'clearing floats' on Google or Stack Overflow for other solutions, though in this case this should be the cleanest.

jsfiddle demo: http://jsfiddle.net/9sxrN/1/

Related questions

How to make a div 100% height of the browser window

I have a layout with two columns - a left div and a right div. The right div has a grey background-color, and I need it to expand vertically depending on the height of the user's browser window. Right now …

Read More
Make iframe automatically adjust height according to the contents without using scrollbar?

For example: <iframe name="Stack" src="http://stackoverflow.com/" width="740" frameborder="0" scrolling="no" id="iframe"> ... </iframe> I want it to be able to adjust its height according to the contents inside it, without using scroll.

Read More
Make body have 100% of the browser height

I want to make body have 100% of the browser height. Can I do that using CSS? I tried setting height: 100%, but it doesn't work. I want to set a background color for a page to fill the entire browser window, …

Read More