Div move down relative to another

Question

Please help me. I would like to have two divs on the same line, but one was move down.

<div style="height:200px;width:200px;display:inline-block;">
<div style="height:200px;width:200px;background:#000000;"></div>
</div>

<div style="height:200px;width:200px;display:inline-block;border:1px solid #000000;">
1<br>2</div>

example on jsfiddle.net

possible duplicate of [Why are these two identical inline divs misaligned when one has text and the other doesn't?](http://stackoverflow.com/questions/21990281/why-are-these-two-identical-inline-divs-misaligned-when-one-has-text-and-the-oth) — j08691, Feb 26 '14 at 16:53
@j08691 oh yeah, my topic is duplicate. may be someone will find with my words.. — user3073240, Feb 26 '14 at 16:58

score 2 · Accepted Answer · edited May 23 '17 at 12:20

2

You need to add the same vertical-align to both of the outer divs.

vertical-align: top;

jsFiddle Demo

BTW - It's highly not advisable to use inline styles. Use out-of-line CSS file/block to make things better.

edited May 23 '17 at 12:20

Community

1
1

answered Feb 26 '14 at 16:52

Itay

16,601
2
51
72

score 2 · Answer 2 · answered Feb 26 '14 at 16:52

you need to use vertical-align:top;

add the css vertical-align:top; to the <div>'s that have display:inline-block;

Example http://jsfiddle.net/9TZsy/2/

here's a great article on this: http://css-tricks.com/what-is-vertical-align/
another: http://www.impressivewebs.com/css-vertical-align/

score 1 · Answer 3 · answered Feb 26 '14 at 16:52

1

Add float:left to both instead of display:inline-block

JSFIDDLE:

http://jsfiddle.net/9TZsy/3/

answered Feb 26 '14 at 16:52

vaskort

2,591
2
20
29

Div move down relative to another

3 Answers3