html - Display two divs inline -

html - Display two divs inline -

i need display 2 divs 1 next on same line, can't understand why sec 1 lower first one.

<div class="cont-title"> <div class="triang-header"></div> <div class="h2-stripe"> <h2 itemprop="name"> title </h2> </div> </div>

this css:

.cont-title{ margin-right: -7px; min-width: 90%; max-width: 100%; height:51px; float:right; text-align:right; white-space: nowrap; } .triang-header{ position:relative; width:39px; height:38px; display:inline-block; background:url('../images/titlebar.png') no-repeat top left; } .h2-stripe{ position:relative; z-index:10; display:inline-block; text-align:left; background-color: #2a58ae; margin:0; height:38px; min-width:80%; line-height:38px; box-shadow: 2px 3px 5px 0 #555; }

what doing wrong?

the margin of h2 element causes sec div shift down. also, should vertical-align inline-block elements. see updated snippet (also corrected class name in css).

class="snippet-code-css lang-css prettyprint-override">.cont-title{ margin-right: -7px; min-width: 90%; max-width: 100%; height:51px; float:right; text-align:right; white-space: nowrap; } .cont-title > * { vertical-align: middle; } .triang-header{ position:relative; width:39px; height:38px; display:inline-block; background:url('http://placehold.it/39x38') no-repeat top left; margin: 0; } .h2-stripe{ position:relative; z-index:10; display:inline-block; text-align:left; background-color: #2a58ae; margin:0; height:38px; min-width:80%; line-height:38px; box-shadow: 2px 3px 5px 0 #555; } h2 { margin:0; } class="snippet-code-html lang-html prettyprint-override"><div class="cont-title"> <div class="triang-header"></div><div class="h2-stripe"><h2 itemprop="name"> title </h2> </div> </div>

html css