Adjacent inline-block elements are displaced upon adding text. (HTML/CSS)

Question

I'm having an annoying problem which I believe is completely explained by the title of this question and this Example

#body {
    height: 300px;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #333;
}
#container {
    height: 10%;
    background-color: #000;
}
.innerContainer {
    width: 30%;
    height: 100%;
    margin: 0 9.5%;
    background-color: #F00;
    display: inline-block;
}

.text {
    height : 100%;
    line-height: 100%;
}
#button {
    margin-top: 20%;
    margin-left: 20%;    
}

score 6 · Accepted Answer · answered Aug 12 '13 at 05:46

6

As your .innerContainer is set to display: inline-block; you need to add vertical-align: top; inorder to set the element right.

.innerContainer {
    width: 30%;
    height: 100%;
    margin: 0 9.5%;
    background-color: #F00;
    display: inline-block;
    vertical-align: top;
}

Demo

answered Aug 12 '13 at 05:46

Mr. Alien

153,751
34
298
278

Perfect Alien, thanks. It works--but I don't understand why the initial code didn't work. Could you explain why the vertical-align property is needed please? – joshterrell805 Aug 12 '13 at 06:22
1

@SexyBachelor inline elements sit on the baseline, so I used `top` to shift it up, you can read [this](http://css-tricks.com/what-is-vertical-align/), not completely relevant to the issue but it will give you an idea :) and you welcome – Mr. Alien Aug 12 '13 at 06:27
Sweet, thanks for the link. It's curious that the outer element gets aligned using the inner element's text, but I guess that's very useful in some cases. Much appreciated! – joshterrell805 Aug 12 '13 at 06:34

score -1 · Answer 2 · answered Aug 12 '13 at 05:46

-1

.innerContainer {
width: 30%;
height: 100%;
margin: 0 9.5%;
background-color: #F00;
display: inline-block; /* float:left; */
}

answered Aug 12 '13 at 05:46

geekchic

2,371
4
29
41

Adjacent inline-block elements are displaced upon adding text. (HTML/CSS)

2 Answers2