Display two divs inline - html

Question

I need to display two divs one next to another on the same line, but I can't understand why the second one is slightly lower than the first one.
<div class="cont-title">
<div class="triang-header"></div>
<div class="h2-stripe">
<h2 itemprop="name">
Title
</h2>
</div>
</div>
This is the 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 am I doing wrong?

Answer 1

I think you did not count the line-height,
should be like this the style for .h2-stripe:
.h2-stripe{
position:relative;
line-height: 23px; // <----
z-index:10;
display:inline-block;
text-align:left;
background-color: #2A58AE;
margin:0;
height:38px;
min-width:80%;
box-shadow: 2px 3px 5px 0 #555;
}
here it is an example with line-height:23px for .h2-stripe: http://jsfiddle.net/6a0ga3uq/

Answer 2

you misspelled your class
.h2-strispe{
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;
}
should be
.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;
}

Answer 3

The margin of your h2 element causes the second div to shift down. Also, you should vertical-align inline-block elements. See this updated snippet (also with corrected class name in CSS).
.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;
}
<div class="cont-title">
<div class="triang-header"></div><div class="h2-stripe"><h2 itemprop="name">
Title
</h2>
</div>
</div>

Answer 4

In the second div, you have line height and lot of other stuff. So other elements can extend your div. If you want your div to be the same size regardless to its other elements you should change display attribute like this
.h2-strispe{
position:relative;
z-index:10;
display:inline-block;
box-sizing:border-box;
text-align:left;
background-color: #2A58AE;
margin:0;
height:38px;
min-width:80%;
line-height:38px;
box-shadow: 2px 3px 5px 0 #555;
}
You can see i added box-sizing to border-box and that will save the position of your div no matter what you do to inner elements