Set the CSS/HTML to make two child elements occupy 50% of the height of the parent container div

Question

Set the CSS/HTML to make two child elements occupy 50% of the height of the parent container div

This task seems deceptively simple, yet I am struggling to find a straightforward solution.

Language: (HTML)

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

I am trying to make each .subcontent div fill 50% of the height of the .subcontent-outer div. While this works in modern browsers, the height of the container div is variable.

Could someone please advise me on how to achieve this?

Thank you,

Harley

html css

Answer 1

Answer №1

It seems like you missed closing the paragraphs in your code snippet. Remember to close them as shown below:

<div class="col-6-12 subcontent-outer">
    <div class="subcontent">
        <h1>Header</h1>
        <p>
           Content goes here
        </p>
    </div>
    <div class="subcontent">
        <h1>Header</h1>
        <p>
           More content here
        </p>
    </div>
</div>

If that didn't solve the issue, you can also try the following CSS:

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

.subcontent {
    height: 50%;
}

UPDATE:

When setting the height of a child element in percentage, ensure that the parent element has a defined height. You can test this by adding a height property to the parent element like so:

.subcontent-outer {
    height: 500px; /* or any other value */
}

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

.subcontent {
    height: 50%;
}

Answer 2

It seems like you missed closing the paragraphs in your code snippet. Remember to close them as shown below:

<div class="col-6-12 subcontent-outer">
    <div class="subcontent">
        <h1>Header</h1>
        <p>
           Content goes here
        </p>
    </div>
    <div class="subcontent">
        <h1>Header</h1>
        <p>
           More content here
        </p>
    </div>
</div>

If that didn't solve the issue, you can also try the following CSS:

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

.subcontent {
    height: 50%;
}

UPDATE:

When setting the height of a child element in percentage, ensure that the parent element has a defined height. You can test this by adding a height property to the parent element like so:

.subcontent-outer {
    height: 500px; /* or any other value */
}

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

.subcontent {
    height: 50%;
}

Set the CSS/HTML to make two child elements occupy 50% of the height of the parent container div

Answer №1

Similar questions

Disabling the scrollTop() effect following a click event with onClick()

Scrolling back to the top of the page using Jquery instead of a specific div

The CSS file I've linked to in my HTML (ejs) document seems to be getting

Refresh the HTML webpage using AJAX technology

Having Trouble with the Bootstrap Responsive Menu Button Not Working

Switching up the content of an HTML page with JavaScript or JQuery: what you need

Creating a multi-level mobile navigation menu in WordPress can greatly enhance user experience and make

Tips for extracting the chosen value from a dropdown list within a table cell using JavaScript

The child element with a minimum height of 300 pixels is failing to inherit the height of its parent

The CSS styling of Confluence content is stripped when exporting to Word

Troubleshooting problems with text areas in Android when using JQueryMobile and PhoneGap

Preventing the copying and pasting of HTML ruby tags

Heroku: Showcasing a unique page during the application's startup process

Manage user interface elements on mobile devices

Connecting to an element within a separate node (XSLT)

Highlight all the written content within the text box

Enable a button or class to dynamically alter its color

The sizing of elements in Firefox seems to be off when using percentage

How is it possible for a JavaScript variable sharing the same name as a div Id to automatically pass the div?

Seamless scrolling experience achieved after implementing a header that appears when scrolling up