Child div in parent div, float:left

Question

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

Answer 1

Add one extra and empty div to parent div with this format:

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

Answer 2

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 3

add display: table; inside parent. That'll work.