How to force div element to keep its contents inside container

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/

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/

Related