Content of div affects horizontal alignment, inline-block issue

Question

I'm struggling a bit with this CSS-issue: http://jsfiddle.net/timkl/JbEX8/

I want two divs to align horizontally using "display: inline-block", however when I add text to one of the divs, the alignment is off.

Is there a way to make the two divs align without resorting to floats?

This is my markup:

<div class="box">
    <p>Some text</p>
</div><!-- /box -->

<div class="box">
    <!-- No text -->
</div><!-- /box -->

This is my CSS:

body {
color: gray;
}

.box {
    background: #ccc;
    height: 100px;
    width: 200px;
    display: inline-block;   
}

Check out my example on jsfiddle: http://jsfiddle.net/timkl/JbEX8/

scessor · Accepted Answer · 2011-11-01T14:05:35.610

9

Add vertical-align to class box:

vertical-align: middle;

Also see the updated jsfiddle.

edited Nov 01 '11 at 14:05

answered Nov 01 '11 at 13:57

scessor

score 3 · Answer 2 · answered Nov 01 '11 at 13:55

You should float them:

.box {
    float: left;

    background: #ccc;
    height: 100px;
    width: 200px;
    display: inline-block;   
}

Do note that since you didn't define margins, there is no spacing between them.

2 Answers2