Display two divs inline

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?

`position: relative` shouldn't be needed. Try removing that and just using the `display: inline-block` property. — Sam Hanley, Nov 06 '14 at 18:07
possible duplicate of [How to place two divs next to each other?](http://stackoverflow.com/questions/5803023/how-to-place-two-divs-next-to-each-other), and literally dozens of other questions. — Sam Hanley, Nov 06 '14 at 18:09
@sphanley i need position:relative to position that div over another (see z-index) And it's not a duplicate cause the one you pointed uses float, and i don't want to use that since the divs are inside a fluid-layout template, and the second div would go new line every time the window is too narrow or the title inside the h2 tag is too long. — dgtal, Nov 07 '14 at 08:36

score 3 · Answer 1 · answered Nov 06 '14 at 18:05

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/

score 1 · Answer 2 · answered Nov 06 '14 at 18:05

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;
 }

Sorry, the mispell was in the post, not on the real css file. Thanks anyway — dgtal, Nov 07 '14 at 08:04

score 0 · Accepted Answer · answered Nov 06 '14 at 18:07

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>

Thanks! You were right, the margin of h2 and the vertical-align property were the problems. — dgtal, Nov 07 '14 at 08:13

score 0 · Answer 4 · answered Nov 06 '14 at 18:08

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

Display two divs inline

4 Answers4