I have a container here which has three child divs which are inline-block. Now when I add a child like div or paragraph inside child one, the parent div pushes down. I know the solution already. if I use property vertical-align top the problem is fixed. But I am just curious to know what is the reason?
jsfiddle here
body{
margin:0
}
#navbar {
width:100%;
background-color:black;
height:50px;
padding: 0 150px 0 150px;
position:relitive;
}
#logo {
height:60px;
width:90px;
}
#container {
background-color:#E6E6E6;
width:78%;
margin: auto;
height:1000px;
text-align:center;
}
#navTable {
color:white;
position:absolute;
top:10px;
left:300px;
font-size:1.5em;
}
#navTable td {
padding:0 10px 0 10px;
border-right:1px solid white;
}
#container>div {
width:32%;
height:100%;
border:1px solid black;
display:inline-block;
}
.content {
background-color:yellow;
height:300px;
} <div id='navbar'>
<img id='logo' src="http://i.cdn.cnn.com/cnn/.e/img/3.0/global/misc/cnn-logo.png"/>
<table id='navTable'>
<tr>
<td>Home</td>
<td>News</td>
<td>Money</td>
<td>Entertainment</td>
<td>Travel</td>
</tr>
</table>
</div>
<div id='container'>
<div id='leftDiv'>
<p>HHHHHH</p>
</div>
<div id='middleDiv'></div>
<div id='rightDiv'></div>
</div>