How to make parent div height of their children?

Question

This seems like a really stupid question, but I can't figure it out.

I have UL in the horizontal menu, but the parent div will not adjust to the height of the children. Here's jsFiddle: http://jsfiddle.net/STSjm/202/

HTML

<div class="menu"> <ul> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> </ul> <div class="clear"></div> 

And CSS:

 .menu { background: blue; } .menu li{ float: left; background: green; } .menu li a{ background: red; padding: 25px 25px 25px 25px; } .menu li a:hover{ background: orange; } .clear { clear: both; } 

Answer 1

Here's what happens:

<a> elements are indented, but by default they are display:inline , which add padding to the element but do not actually add width / height to it, so the menu does not expand.

To fix this, set display:block to the anchors:

http://jsfiddle.net/STSjm/216/

Also, you don't need a “clean” div, adding that this CSS should do the trick:

 .menu { float:left; width:100%; } 

http://jsfiddle.net/STSjm/218/

There are also several “clearfix” CSS solutions to solve this problem without adding unnecessary unnecessary HTML markup.