Why does bigger text push content to the left down?

Question

So I made four simple divs and I will be changing the property of the header div.

The HTML:

   <div class="third">
        Lorem Ipsum
    </div>
    <div class="third">
        Lorem Ipsum
    </div>
    <div class="third">
        <div class="header">Lorem Ipsum</div>
    </div>

The CSS:

.third {
    width:500px;
    display:inline-block;
    border-right:1px solid black;
    height:400px;
}
.header {
    margin-left:16%;
    font-family:Arial;
    font-size:200%;
}

The third div works great but the first two divs are pushed down because of the bigger text. What can I do to prevent this issue?

In short, add `vertical-align:top` to `.third`. The default `vertical-align` value is `baseline`. The baseline of an `inline-block` is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its `overflow` property has a computed value other than `visible`, in which case the baseline is the bottom margin edge - see http://stackoverflow.com/questions/12950479/display-inline-block-elements-vertical-aligns-inproperly/12950536#12950536 — andyb, Mar 26 '14 at 16:41
@CTravel change that width to `100px` (or make your browser width > `1500px`) so the blocks don't wrap to see see the problem. — andyb, Mar 26 '14 at 16:53

score 2 · Accepted Answer · edited May 23 '17 at 10:31

2

Adding vertical-align: top will fix your problem.

Fiddle: http://jsfiddle.net/QX7FH/

If you're curious why this works, andyb does a great job explaining why here: Why does this inline-block element have content that is not vertically aligned

edited May 23 '17 at 10:31

Community

1
1

answered Mar 26 '14 at 16:42

Jack

9,151
2
32
44

Please try to actually explain why your answer fixes the problem. – andyb Mar 26 '14 at 16:52
@andyb Wow, sorry. I actually thought you did a great job explaining in your comment (which, I gave you an upvote for). I saw your answer and link after posting my answer. I apologize for not being as thorough as your original post. – Jack Mar 26 '14 at 18:09
1

It's not really about being thorough but about sharing your knowledge of what the problem is and why your solution fixes it. I've seen so many answers downvoted for not explaining so was just trying to help you not suffer the same fate! There is no need to apologize :) – andyb Mar 26 '14 at 20:30
1

Thanks @andyb. I hear you.. Stack Overflow suffers from "first post!" syndrome where thorough answers are ignored for immediate solutions (and quick reputation). This site is a great resource for knowledge sharing (I've personally learned a lot from thorough answers like yours), and it should definitely be used that way. Thanks again. – Jack Mar 26 '14 at 21:19

score 1 · Answer 2 · answered Mar 26 '14 at 16:41

You can use floats instead of inline-block, you also gain a little bit of browser support (old ie's):

http://jsfiddle.net/aP9Fu/

.third {
    width:500px;
    display:block;
    border-right:1px solid black;
    height:400px;
    float: left;
}

Also, I added a container around all those divs in order to clear the floats.

score 0 · Answer 3 · edited Mar 26 '14 at 16:42

0

div's are automatically set to be block elements. This means that they will create a line break. If you also put display:inline-block; in your css for your .header, it should prevent it from creating a new line.

edited Mar 26 '14 at 16:42

Carl0s1z

4,683
7
32
47

answered Mar 26 '14 at 16:40

Katrina

1,922
2
24
42

Why does bigger text push content to the left down?

3 Answers3