1

I'm a bit baffled by this. I've put it up on codepen. Basically, I'm using block-inline to make a centered grid of square divs which wraps if the screen is too small.

.outer{
    width: 100%;
    text-align: center;
}
.inner{
    margin: 0 auto; /* center */
}
.div{
    margin: 10px;
    display: inline-block;
    width: 300px;
    height: 300px;
}

The inner and outer divs there are so all the foo divs (which are inside the inner div, as you can see below) will be centered.

<div id="outer">
    <div id="inner">
        <div class="foo">
            Lorem ipsum dolor sit amet.
        </div>
        <div class="foo">
            Suspendisse at condimentum orci, nec egestas diam.
        </div>
    </div>
</div>

I was very pleased and thought it was job done; all I had to do was put in the content. It was when I put in the content that this happened. As you can see, the bottom text is lining up with the bottom text in the other foo div's, which is making the div's get out of line. Is there a way I can make it so the text inside the div has no affect on its position? So that what goes on inside the div is its own business and doesn't affect anything outside, so to speak.

Androconus
  • 143
  • 6
  • I found more info here: http://stackoverflow.com/questions/12950479/why-does-inline-block-element-having-content-not-vertically-aligned – kojow7 Mar 07 '16 at 02:37

1 Answers1

1

You need to give the divs vertical-align:top;. They currently have the property vertical-align:center;

.outer{
    width: 100%;
    text-align: center;
}
.inner{
    margin: 0 auto; /* center */
}
.div{
    margin: 10px;
    display: inline-block;
    width: 300px;
    height: 300px;
    vertical-align:top;
}
Wowsk
  • 3,637
  • 2
  • 18
  • 29
  • oh, thank god! Such a simple solution to something which I've been gnashing my teeth over for so long. – Androconus Mar 07 '16 at 00:21
  • My question is why are the inline-blocks aligning according to their content and not the size of the blocks themselves? – kojow7 Mar 07 '16 at 00:36
  • @kojow7 - Think about an inline-block that just has a single line of text in it, i.e. there just so you can give it vertical margins for example. You'd want that line of text to align vertically with the text on the same line outside the inline-block, wouldn't you? Think how difficult that would be to achieve if inline-blocks didn't align according to their content. So it makes sense that this is what inline-blocks do. – Alohci Mar 07 '16 at 00:46
  • I thought inline blocks aligned themselves to the baseline of the text outside of the block. – kojow7 Mar 07 '16 at 02:05
  • I found more info here: http://stackoverflow.com/questions/12950479/why-does-inline-block-element-having-content-not-vertically-aligned – kojow7 Mar 07 '16 at 02:37