display: inline-block pushes my divs downwards

Question

My problem is that i'm trying to get three entirely independent columns and with 'display: inline-block', my columns get side by side but starts under the biggest.

HTML, CSS:

.container > div {
 display: inline-block;
}

<body>
  <div class="container">
  <div>
    aaaaaaa<br>bbbbbb
  </div>
  <div>
    cccccc<br> ddddddd<br>eeeeeee
  </div>  
    <div id="end">
      ffffff
    </div>
  </div>
    
</body>

The problem is that the smallest line is aligned to the last line of the biggest div, as follows:

this has been answered so many times on SO, try searching first then question afterwards — dippas, Mar 12 '17 at 22:47

Michael Benjamin · Answer 1 · 2017-03-19T13:29:03.937

1

When dealing with inline-level and table cell elements, the vertical-align property applies. The initial value of this property is baseline. That's what you're seeing. The text in each box is aligned to the baseline. Adjusting the vertical-align property to another value (such as top) solves the problem. https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

edited Mar 19 '17 at 13:29

answered Mar 12 '17 at 22:45

Michael Benjamin

346,931
104
581
701

score 0 · Answer 2 · answered Mar 12 '17 at 22:38

0

Found the solution, although i don't think it's the best way to do this:

.container > div {
   vertical-align: top;
}

:)

answered Mar 12 '17 at 22:38

Felipe Borges

320
3
13

1

I think this is the best way to do this. Why the uncertainty? What else would you suggest? – Michael Benjamin Mar 12 '17 at 22:52
1

This is the common way to line up inline-blocks by their top border, don't worry. – Johannes Mar 12 '17 at 23:05
Idk, i'm just never satisfied. Thanks, guys – Felipe Borges Mar 12 '17 at 23:07

score 0 · Answer 3 · answered Mar 12 '17 at 22:42

0

You could add css property vertical-align: top, that way all content will start at the top of the div.

.container > div {
 display: inline-block;
vertical-align:top
}

<body>
  <div class="container">
  <div>
    aaaaaaa<br>bbbbbb
  </div>
  <div>
    cccccc<br> ddddddd<br>eeeeeee
  </div>  
    <div id="end">
      ffffff
    </div>
  </div>
    
</body>

answered Mar 12 '17 at 22:42

Cristian Colorado

2,022
3
19
24

Yeah, just tried that. Thank you! – Felipe Borges Mar 12 '17 at 22:43
I would suggest you to check into flex property in order to handle columns width in a responsive environment. This guide is awesome: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Cristian Colorado Mar 12 '17 at 22:47

display: inline-block pushes my divs downwards

3 Answers3