When you put some float div inside another div, The outer div will collapse in other words the size of dimension the outer div will small than the inner float div.
The solution is append a div with clear and block style in the end of the other float inner div as below:
<div id="outer_div">
<div class="float-style">Item 1</div>
<div class="float-style">Item 2</div>
<div class="float-style">Item 3</div>
<div style="clear:both;display:block;"></div>
</div>
Solution 2: using overflow:auto; in the outer div style can also prevent outer div collapsed. But this method may cause outer div appear scroll bar when new div adding to it.
<div id="outer_div" style="overflow:auto;">
<div class="float-style">Item 1</div>
<div class="float-style">Item 2</div>
<div class="float-style">Item 3</div>
<div style="clear:both;"></div>
</div>
related link: http://css-tricks.com/all-about-floats/
