CODEWITHSUNDEEP
htmlcss
Androconus
Androconus

Reputation: 143

How do I make text in a inline-block div completely independant to any text outside the div?

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.

Upvotes: 1

Views: 227

Answers (1)

Wowsk
Wowsk

Reputation: 3675

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;
}

Upvotes: 1

Related Questions