How to make an inline-block box stick to the top?

Question

I try to make the blue container stick to the top. How can I manage that?

HTML:

<div class="container">
    <div class="a">blue</div>
    <div class="b">green</div>
</div>

CSS:

.a {
    width:100px;
    height:400px;
    display:inline-block;
    background-color:blue;
}
.b {
    width:400px;
    height:600px;
    display:inline-block;
    background-color: green;
}
.container {
    vertical-align:top;
}

http://jsfiddle.net/xswa4/

vertical-align: top;

doesn't work...

score 10 · Accepted Answer · answered Feb 13 '14 at 22:26

10

You should use vertical-align:top; on the element .a itself, not the parent .container:

.a {
    display:inline-block;
    background-color:blue;
    vertical-align:top;
}

JSFiddle Demo

answered Feb 13 '14 at 22:26

Hashem Qolami

97,268
26
150
164

It worked fine! Thank you! Just one more question: why does the green box move up when I apply the vertical-align on the blue one? – mxcd Feb 13 '14 at 22:29
@maximilian009 I'm testing in Chrome 32 on Windows 7, but I don't see this issue on the fiddle demo. – Hashem Qolami Feb 13 '14 at 22:31
I'm not having any issues. I dont understand why the blue box moves up when I apply vertical-align-top to the green box. Wouldnt it be logical that the blue box moves up when I apply the style to the blue box and the green one moves up when I apply it to the green one? – mxcd Feb 13 '14 at 22:33
1

@maximilian009 In fact, in that case the `blue` box is still **[aligned vertically in its `baseline`](http://jsfiddle.net/hashem/xswa4/6/)**. The point is that the larger box (the green one) stretches the *parent* and affects the visual alignment of the other `inline(-block)` elements. – Hashem Qolami Feb 13 '14 at 23:01

score 1 · Answer 2 · answered Feb 13 '14 at 22:27

1

Your vertical-align needs to be on the blue container, not the parent container.

.a
{
    width:100px;
    height:400px;
    display:inline-block;
    background-color:blue;
    vertical-align: top;
}

Fiddle: http://jsfiddle.net/xswa4/3/

answered Feb 13 '14 at 22:27

mayabelle

9,804
9
36
59

Kirti Thorat · Answer 3 · 2014-02-14T14:40:45.413

Answer to Original Question:

When you specify vertical-align: top The top of the element is aligned with the top of the tallest element on the line. In your case, the div siblings a and b are on the line within the parent div container. So, the logical place to give the vertical-alignment is at the div sibling level.

Answer to your comment question:

I don't understand why the blue box moves up when I apply vertical-align-top to the green box.

If the vertical-align: top property is applied to the tallest element on the line, then the sibling which in your case is div a would align to the tallest. If you want to explore more take a look at the JSFiddle Example.

Look how a,b,c,d and e are aligned when I set the vertical-align: top property on the c div which is the tallest one. In this case, within siblings divs a, b, d and e, d is the tallest so it gets aligned to the tallest element i.e. c but a,b and e are aligned to the horizontal baseline of d who is the next tallest.

score 0 · Answer 4 · answered Feb 13 '14 at 23:01

0

Better way to do it.

.container{position:relative;}
.a {position:absolute;top:0;}

Im surprised no one has mentioned absolute positioning.

answered Feb 13 '14 at 23:01

httpgio

127
6

VERTICAL ALIGN IS USED FOR TABLES – httpgio Feb 13 '14 at 23:01
2

...and inline or inline-block elements :). Why are you shouting? – kapa Feb 13 '14 at 23:14
1

`Im surprised no one has mentioned absolute positioning` Because by using absolute positioning, the elements would be removed from document normal flow and the container wouldn't have any idea about the absolute positioned elements to adjust its height. Also, IMO changing the whole logic may cause trouble for the OP. Sincerely. – Hashem Qolami Feb 13 '14 at 23:44

How to make an inline-block box stick to the top?

4 Answers4