html - Backgrounds on no-height divs -

i keep running same issue on , on again - fluid div floated elements in has no background (because has "no height"). i've tried using :after selectors, , , making fake height. none of these solutions elegant or consistent. know best, adaptable, flexible method dealing this. i'm looking "this how pros it" solution, can reuse on , on , never have worry again.

here's extremely simple jsfiddle can play with. lists should have orange background. http://jsfiddle.net/y4va3/

code 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 here     </div> </div> 

thanks time.

as have said, overflow: hidden preferred way of making sure collapsing elements height need. here's a nice explanation:

the following property/value combinations cause element establish new block formatting context:

float: left , float: right  display: inline-block, display: inline-table, display: table-cell , display: table-caption  position: absolute , position: fixed  overflow: hidden, overflow: auto , overflow: scroll    , overflow-x , overflow-y counterparts. 

it's not hard understand why overflow: hidden (or overflow: auto) used establishing new bfc: other options either have highly undesirable side-effects, or unsupported internet explorer 7 , below.

so in theory, use of above make sure parent element knows has other elements inside (it's keep in mind though of them have side effect of creating new bfc, purpose of listed properties being entirely different).

a trick use quite if can't add overflow: hidden reason (eg, menus showing on hover span outside of parent), float parent element, too. in case, so:

.content {     background-color: orange;     width:50%;     margin: 0;     float: left; } 

of course, break centering, , not suitable in particular case. it's nice keep in mind in cases don't want hide overflows. can add width: 100% measure make sure floating parent element imitates block-level structure :)