inline-block elements not lining up

Question

I have some HTML that looks a bit like this:

<div style="display:inline-block;">
<h2>Heading 1</h2>
<table>
<tr><td>Some rows and data cells</td></tr>
</table>

<h2>Heading 2</h2>
<table>
<tr><td>Some more rows and data cells</td></tr>
</table>
</div>

<div style="display:inline-block;">
<h2>Heading 3</h2>
<table>
<tr><td>Last lot of rows and data cells</td></tr>
</table>
</div>

It's meant to work so that the third table and heading appear to the right of the other two, which are on top of each other, so that there is essentially 2 columns with the first two headings/tables in the left and the third heading/table in the right. Problem is, this code when used has the third heading aligning with the second, and the third table extending below the second. The third heading should be in line with the first, or at least the information in the second div should be centred in such a way as to be centred to the information in the first div.

Question 1: Why is the content of the second div aligning to the top of the second heading rather than the top of the first div, and

Question 2: How can I make the divs align properly (and don't suggest a float)?

Fiddle: http://jsfiddle.net/L9d0Logh/

1. Use `vertical-align:top` 2. Remove the whitespace bewteen divs (note HTML comments) - [fiddle](http://jsfiddle.net/L9d0Logh/2/) — Vucko, Sep 17 '14 at 08:38
your code does what it's suppose to, all you need now is to align the 3rd block with vertical-align top, and it's done — Gho, Sep 17 '14 at 08:40
Question 1: actually it is aligned to the baseline, which in your case becomes the bottom of the first `div`. — YuS, Sep 17 '14 at 08:43

score 1 · Answer 1 · answered Sep 17 '14 at 08:42

Use vertical-align: top; also remove white-space between inline elements, so there will be no gaps between blocks.

.wrapper {
    display: inline-block;
    vertical-align: top;
}

    <div class='wrapper'>
    <h2>Heading 1</h2>
    <table>
    <tr><td>Some rows and data cells</td></tr>
    </table>
  
    <h2>Heading 2</h2>
    <table>
    <tr><td>Some more rows and data cells</td></tr>
    </table>
    </div><!--
    
    --><div class='wrapper'>
    <h2>Heading 3</h2>
    <table>
    <tr><td>Last lot of rows and data cells</td></tr>
    </table>
    </div>

score 0 · Accepted Answer · answered Sep 17 '14 at 08:41

0

You can add vertical-align: top; to the divs.

answered Sep 17 '14 at 08:41

YuS

2,025
1
15
24

inline-block elements not lining up

2 Answers2