Child div in parent div, float: left

Question

Please take a look at my code: http://jsfiddle.net/XptrZ/ Why there are no blue divs inside red, and why red has height = 0. How can I solve this? Thanks

Answer 1

add overflow: hidden to parent

 .parent { background-color: gold; border: 1px solid gold; position: relative; overflow: hidden } .child { float: left; width: 100px; height: 100px; display: block; margin: 10px; background-color: pink; border: 1px solid #999; } 

 <div class="parent"> <div class="child">div1</div> <div class="child">div2</div> <div class="child">div3</div> </div> 

Answer 2

add display: table; inside the parent. This will work.

Answer 3

Add one additional and empty div to the parent div with this format:

  <div style="clear:both"></div>