css : strange behaviour when displaying divs side by side

Question

I'm trying to display some divs side by side using the css property display:inline-block; for the children and position:relative for the parent/container as described in the code below :

<div style="margin-top: 20px; position: relative;">
    <div style="margin: 15px; border: solid 2px; width: 130px; height: 130px; padding: 10px; text-align: center; display:inline-block;">
         test test test
    </div>
    <div style="margin: 15px; border: solid 2px; width: 130px; height: 130px; padding: 10px; text-align: center; display:inline-block;">
        test test test test test test test test test test test test test test test test test test 
    </div>
    <div style="margin: 15px; border: solid 2px; width: 130px; height: 130px; padding: 10px; text-align: center; display:inline-block;">
         test test test
    </div>
    <div style="margin: 15px; border: solid 2px; width: 130px; height: 130px; padding: 10px; text-align: center; display:inline-block;">
         test test test
    </div>
</div>

But the result was different when one of the those divs contain a long text

What's the explanation of this.

do not use inline css. use a separate style sheet! we are no more in the '90s! — Lelio Faieta, Oct 18 '18 at 08:06
I would never use `inline-block` to display container in a row. Take a look at `flex-box`. You HAVE to learn that. You can layout whole websites with flex boxes. w3schools has some good tutorials. — Aaron3219, Oct 18 '18 at 08:11
one of the main reasons not to use inline css is for code readibility. And when you ask someone to help you you should take it into account — Lelio Faieta, Oct 18 '18 at 08:13
@Aaron3219 I think his question was about the unexpected result, why one of the divs didn't stood on the same level of the others. — SlimenTN, Oct 18 '18 at 08:13
Reason is that the default value for `vertical-align` is `baseline` … change it to something else, if you don’t like its effect. — misorude, Oct 18 '18 at 08:15
@Aaron3219 thanks it's work fine now but what is the reason for this result — isom, Oct 18 '18 at 08:18

score 4 · Accepted Answer · answered Oct 18 '18 at 08:17

Because inline-block will align everything as its center / base-line.

Either use: display: flex for parent div and block for child div or use display: table-cell for child div.

<div style="margin-top: 20px; position: relative; display: flex">
    <div style="margin: 15px; border: solid 2px; width: 80px; height: 130px; padding: 10px; text-align: center; display: block;">
         test test test
    </div>
    <div style="margin: 15px; border: solid 2px; width: 80px; height: 130px; padding: 10px; text-align: center; display: block;">
        test test test test test test test test test test test test test test test test test test 
    </div>
    <div style="margin: 15px; border: solid 2px; width: 80px; height: 130px; padding: 10px; text-align: center; display: block">
         test test test
    </div>
    <div style="margin: 15px; border: solid 2px; width: 80px; height: 130px; padding: 10px; text-align: center; display: block;">
         test test test
    </div>
</div>

Or specify `vertical-align: middle` (or another value, depending on what one wants) on each of the `body > div > div` elements. — Armen Michaeli, Oct 18 '18 at 08:30

Stephan Fuhlendorff · Answer 2 · 2018-10-18T09:47:58.903

2

Either give the sorrounding div

display: flex;

Or give each of the child divs

vertical-align: text-top; // Or another alignment

The flex box approach is in my opinion the better. Flex box in general can be used for a lot. Especially dynamic content. But even for static content it is a great way to make sure to fill exactly what you want to fill. Heres a guide to help anyone interested in flex boxes (worth the read): https://css-tricks.com/snippets/css/a-guide-to-flexbox/

The vertical-align approach is great aswell. The reason this is needed, as mentioned in other answers and comments is because by default inline-block will align everything as its center / base-line.

edited Oct 18 '18 at 09:47

answered Oct 18 '18 at 08:18

Stephan Fuhlendorff

303
1
10

I think your answer would be more useful if it provided an explanation of what is causing the problem, which you indeed touched upon but only after attempting to give a solution (which is just one of many). – Armen Michaeli Oct 18 '18 at 08:32
@amn Thank you for the feedback :) – Stephan Fuhlendorff Oct 18 '18 at 08:34

score -3 · Answer 3 · answered Oct 18 '18 at 08:16

-3

add one more style float: left; to all divs. Will solve the problem.

answered Oct 18 '18 at 08:16

Sanjeet kumar

3,333
3
17
26

`float: left` also work but remember to add another div with `clear: both` at the end. – Daniel Tran Oct 18 '18 at 08:18
1

Why do you want to clear @DanielTran `float: left` also works fine at the end – Sanjeet kumar Oct 18 '18 at 08:21
If you have another div following then everything will be messed up – Daniel Tran Oct 18 '18 at 08:29

css : strange behaviour when displaying divs side by side

3 Answers3