Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Child div in parent div, float:left

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

like image 789
Tamás Pap Avatar asked Jan 17 '12 18:01

Tamás Pap


2 Answers

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>
like image 56
Zoltan Toth Avatar answered Sep 28 '22 08:09

Zoltan Toth


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

like image 32
srijan Avatar answered Sep 28 '22 08:09

srijan