CODEWITHSUNDEEP
htmlcss
harley_woop
harley_woop

Reputation: 1849

CSS/HTML: Make 2 children fill 50% of height of container div

This seems really simple, but I cant find any straightfoward way to carry this out.

Code: (HTML)

            <div class="col-6-12 subcontent-outer">
            <div class="subcontent">
                <h1>Header</h1>
                <p>
                   Stuff
            </div>
            <div class="subcontent">
                <h1>Header</h1>
                <p>
                   Stuff
            </div>
        </div>

So I need each .subcontent to fill 50% of the height of the .subcontent-outer, which works in modern browers, the height of the container div may change.

How can I do this?

Thankyou

Harley

Upvotes: 0

Views: 2872

Answers (1)

Fabian Lauer
Fabian Lauer

Reputation: 511

You forgot to close the paragraphs. Close them, like so:

       <div class="col-6-12 subcontent-outer">
            <div class="subcontent">
                <h1>Header</h1>
                <p>
                   Stuff
                </p>
            </div>
            <div class="subcontent">
                <h1>Header</h1>
                <p>
                   Stuff
                </p>
            </div>
        </div>

If that doesn't help yet, try this:

.subcontent-outer, .subcontent{
    float: left;
}

.subcontent{
    height: 50%;
}

EDIT:

Setting the height of a child element in percent of course requires the parent element to have a height specified.

In this case, you can easily test that with:

.subcontent-outer{
    height: 500px; /* for example */
}

.subcontent-outer, .subcontent{
    float: left;
}

.subcontent{
    height: 50%;
}

Upvotes: 2

Related Questions