CODEWITHSUNDEEP
htmlhtml-tablecss
Cameron Martin
Cameron Martin

Reputation: 6012

Table inside inline-block element breaks vertical alignment

When putting a table inside an inline-block element, the inline-block elements next to it are shifted down, instead of the tops of the elements being aligned.

HTML

<div>
    <table>
        <tr>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
        <tr>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
    </table>
</div>

<div>Element</div>
<div>Element</div>

CSS

div {
    display: inline-block;
    border: 1px solid #000;
}

Result

http://i.gyazo.com/1734f13a3da745e22ada8c93d18f8d4b.png

Jsfiddle

http://jsfiddle.net/dk39j/1/

Why does this happen, and what can I do to prevent it?

Upvotes: 2

Views: 510

Answers (2)

Pradeep Pansari
Pradeep Pansari

Reputation: 1297

You can try this:

DEMO

div {
display: inline-block;
border: 1px solid #000;
vertical-align:top;
}

Upvotes: 1

Josh M
Josh M

Reputation: 992

You need to set vertical-align:top; to the divs beside it

JSFiddle

Upvotes: 3

Related Questions