CODEWITHSUNDEEP
gridvertical-alignmentcss
Fin Moorhouse
Fin Moorhouse

Reputation: 335

Inline-Block divs cannot both vertically align to the top

Whilst trying to create a responsive 'grid' of two (div) panels (so that they are next to one another on wide screens and on top of one another when viewed on smaller screens), I noticed that the divs, when displayed 'block-inline', appear to align at the bottom. Here's the JSFiddle: http://jsfiddle.net/cY6GG/. Is there a way to reverse this and have both divs aligned at the top?

Here is the HTML:

<div id='bigdiv'>
<h1>Lots of Content</h1>
<p>(lots of text)</p>
</div>
<div id='littlediv'>
<p>Not too much content</p>

And the css:

#bigdiv {
display:inline-block;
/*float:left;*/
width:40%;
background:#CCFFFF;
}
#littlediv {
background: #FFCCFF;
display:inline-block;
/*float:left;*/
width:40%;
}

I have tried:

float:left

But then it seems like there is no nice, semantic way to get the panels aligning horizintally in the center. All suggestions would be appreciated. Thanks!

Upvotes: 0

Views: 103

Answers (3)

Dolchio
Dolchio

Reputation: 467

As others have said, you can add vertical-align:top;to the divs to align them.

As for stacking them on top of each other on smallar screens, you need a CSS3 media query.

@media screen and (max-width : 600px)
{
    #bigdiv,
    #littlediv
    {
       width:100%;
       display:block; 
    }
}

Working fiddle: (drag the left edge of the output box to resize)

http://jsfiddle.net/FrF4y/2/

Upvotes: 0

bboysupaman
bboysupaman

Reputation: 1334

Add vertical-align:top; to the styling for the #littlediv

Upvotes: 2

n1kkou
n1kkou

Reputation: 3142

yes, add this to align them top div{ vertical-align:top;}

Upvotes: 2

Related Questions