How to force div element to keep its contents inside container

Question

I am making a css menu. For this I am using a ul. When I make li float left then all li's gets outside of the ul. I mean the height of ul become zero. How can I make li display inside ul after giving float left.

One way to do is to make a div tag with some common class and add clear: both to it in css but I do not want this.

How can I solve this?

Answer 1

Just add overflow: auto; to the <ul>. That will make it so that the text doesn't leak outside of the UL.

See: http://jsfiddle.net/6cKAG/

---

However, depending on what you're doing, it might be easier to just make the <li> display: inline;. It totally depends on what you're doing!

See: http://jsfiddle.net/k7Wqx/

Answer 2

If you define float to your child then you have to clear your parent. Write overflow:hidden to your UL.

ul{
 overflow:hidden;
}

OR You can also use clearfix method for this:

ul:after{
 content:'';
 clear:both;
 display:block;
}

Read this http://css-tricks.com/snippets/css/clear-fix/