CODEWITHSUNDEEP
css
Liftoff
Liftoff

Reputation: 25432

Inline blocks not on same line

I have a very weird problem. I was actually creating a JSFiddle to answer another question when I ran into an alignment issue. Just creating two inline-block elements results in a very weird situation where the left block is pushed down by about 40px.

I know that this is an issue in both Chrome and Firefox (on Mac, not sure about Windows).

See for yourself: JSFiddle

All I have are two custom elements that I called <cell> that contain a title, held in <t> and a lipsum paragraph held in <cnt>.

HTML:

<div align="center">
<cell>
    <t>This is a short title</t>
    <cnt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet adipiscing diam, suscipit commodo augue. In tellus nunc, dapibus eu interdum at, laoreet volutpat est. Duis non mi quis urna malesuada dapibus. Nunc sit amet nulla quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque molestie neque cursus viverra luctus. Mauris ac placerat purus. Aenean vel dictum sem, condimentum pharetra diam. Nunc sed leo et arcu malesuada placerat sit amet nec ipsum.</cnt>
</cell>

<cell>
    <t>This is a very very very very very very very chocolate very very very very very very long title</t>
    <cnt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet adipiscing diam, suscipit commodo augue. In tellus nunc, dapibus eu interdum at, laoreet volutpat est. Duis non mi quis urna malesuada dapibus. Nunc sit amet nulla quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque molestie neque cursus viverra luctus. Mauris ac placerat purus. Aenean vel dictum sem, condimentum pharetra diam. Nunc sed leo et arcu malesuada placerat sit amet nec ipsum.</cnt>
</cell>
</div>

CSS:

cell
{
    display: inline-block;
    width: 300px;
    height: 400px;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 0;
}

Result:

Result

Upvotes: 2

Views: 2532

Answers (1)

j08691
j08691

Reputation: 208032

You need to specify the vertical-align property (e.g. vertical-align:top;) since the default value is baseline (which you can see if the fiddle and image).

cell {
    display: inline-block;
    width: 300px;
    height: 400px;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 0;
    vertical-align:top;
}

jsFiddle example

Upvotes: 7

Related Questions