CODEWITHSUNDEEP
css
SB2055
SB2055

Reputation: 12862

How to ensure that an inner div is inside of its parent container?

I'm losing my mind trying to get this simple thing working - I have a div that's 80px high - inside of which I have other divs that should take up the height of the 80px div, and just fill in the space, essentially splitting the parent div up into sections. Right now the inner divs are getting pushed all over the place and I don't know why.

The boxes should all be hugging each other above the black horizontal line.

JSFiddle: http://jsfiddle.net/Mk7L4/

HTML: 

<div class="post-panel">
    <div class="upvote-area">
        <p>20</p>
    </div>
    <div class="title-area"> <a class="post-title" href="@post.Url"><strong>@post.Title</strong></a>

    </div>
    <div class="response-count-area"> <span>0 replies</span>

        <p>Active: Now</p>
    </div>
    <div class="view-count-area"> <span>0 views</span>

    </div>
</div>

In the css, I have the height of the container element set to 80px, and each of the inner divs set to display: inline-block, and height: 100%.

What am I doing wrong?

Upvotes: 0

Views: 34

Answers (1)

Ace
Ace

Reputation: 969

Add vertical-align: top; 

.post-panel div {
    height: 100%;
    display: inline-block;
    vertical-align: top;
}

;)

Upvotes: 3

Related Questions