Repeatedly encountering the same issue - a fluid div with floated elements lacking a background due to having "no height." I've experimented with various solutions such as :after selectors, , and artificially setting a height, but none are particularly elegant or consistent. I am seeking the optimal, most adaptable method for addressing this problem. The solution that professionals use repeatedly without concern.
Check out this simple jsFiddle for testing: The list items should have an orange background. http://jsfiddle.net/y4Va3/
Snippet from the jsFiddle:
.wrapper {background-color: blue; width: 100%;}
.content {background-color: orange; width: 50%; margin: 0 auto;}
.bottom {background-color: green; width: 100%; clear: both;}
ul {margin: 0px 10px; padding: 0; float: left;}
li {list-style-type: none;}
<div class="wrapper">
<div class="content">
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
</div>
<div class="bottom">
Not much here
</div>
</div>
Your time is appreciated.