Two Inline-Blocks not aligning - html

Question

I have two div inside a container div: JS Fiddle Link
<div id="container">
<div class="leftContainer">
Left
</div>
<div class="rightContainer">
<h3>Right</h3>
</div>
</div>
But I am not sure why they do not align both to top or anywhere with same alignment with this CSS:
div#container{vertical-align:top;background:#e4e4e4}
div#container div{
display:inline-block;
width:200px;
height:50px;
}
div#container div.leftContainer{background:#999}
div#container div.rightContainer{background:#555}

Answer 1

add vertical-align:top; for the child of #container div
div#container div{
vertical-align:top;
}

Answer 2

You have Right inside a <h3> tag, which is adding margin to the tag (which in turn pushes the Right heading down slightly)
Either set both Left and Right to be inside header tags, or remove the one for Right, and they will display the same.
<div id="container">
<div class="leftContainer">
Left
</div>
<div class="rightContainer">
Right
</div>
</div>
And your CSS can be left as it is
div#container{vertical-align:top;background:#e4e4e4}
div#container div{
display:inline-block;
width:200px;
height:50px;
}
div#container div.leftContainer{background:#999}
div#container div.rightContainer{background:#555}

Answer 3

Set float left in the first div to force the align and remove the hr or add the hr to both
div#container{vertical-align:top;background:#e4e4e4}
div#container div{
display:inline-block;
width:200px;
height:50px;
}
div#container div.leftContainer{background:#999; float:left;}
div#container div.rightContainer{background:#555}
<div id="container">
<div class="leftContainer">
Left
</div>
<div class="rightContainer">
Right
</div>
</div>

Answer 4

Just add css:
div#container { float:left;}

Answer 5

div#container div{
float: left;/*remove inline block and add float left to align your div*/
width:200px;
height:50px;
}
SEE DEMO:http://jsfiddle.net/JentiDabhi/x21nv0gm/

Answer 6

if you're able to use external frameworks I'd suggest you using Twitter Bootstrap and use its grid system to align stuff simply by doing somenthing like:
<div class="container">
<div class="row">
<div class="specify column sizes">
Left
</div>
<div class="specify column sizes">
<h3>Right</h3>
</div>
</div>
</div>
Using Bootstrap and specifying your choosen column sizes (col-sm-N, col-md-N, col-xs-N, col-lg-N) instead of using a fixed 200px width allows you to make your page change it's behaviour on different display sizes using only CSS

Answer 7

To retain the display inline-block property, without using floats - you could turn the h3 into an inline element by adding the below CSS:
h3 {display:inline;}

Answer 8

Add vertical-align:top; for the child of #container div
div#container div{
vertical-align:top;
}
And to retain the display inline-block property, without using floats - you could turn the h3 into an inline element by adding the below CSS:
h3 {display:inline;}