Creating a layout with two columns using CSS and setting the height to

Question

Creating a layout with two columns using CSS and setting the height to

Currently, I am dealing with a two-column layout where both columns have a height of 100%. Everything seems to be working fine in that aspect.

However, an issue arises when the content in the left column expands due to a dropdown menu being activated.

Below, you can see the code snippet that demonstrates the problem. I have purposely added another div inside the left column to show that the right column does not expand in height accordingly.

<!doctype html>
    <html style="min-height:100%;height:100%">
    <head>
    <title>test</title>
    </head>
        <body style="min-height:100%;margin:0;background-color:#ccc;height:100%">

        <div style="width:30%;background-color:green;;float:left;min-height:100%"><div style="height:900px">Green</div></div>
        <div style="width:60%;background-color:red;float:right;min-height:100%">Red</div>

        </body>
</html>

I am seeking a suitable solution to ensure that the right column expands in height whenever the left column does.

html css

Answer 1

Answer №1

Here is an example of how you can achieve this:

Check out the demo here

Here is the CSS code:

html,body{
    height:100%;
}
.container{
    display:table;
    background-color:#ccc;
    width:100%;
    height:100%;
}
.green{
    display:table-cell;
    background-color:green;
    width:50%;
}
.red{
    display:table-cell;
    background-color:red;
    width:50%;
}

And here is the HTML code:

<div class="container">
<div class="green">green</div>
<div class="red">red</div>
</div>

If you need more resources, check out these links:

Helpful Links:

Answer 2

Here is an example of how you can achieve this:

Check out the demo here

Here is the CSS code:

html,body{
    height:100%;
}
.container{
    display:table;
    background-color:#ccc;
    width:100%;
    height:100%;
}
.green{
    display:table-cell;
    background-color:green;
    width:50%;
}
.red{
    display:table-cell;
    background-color:red;
    width:50%;
}

And here is the HTML code:

<div class="container">
<div class="green">green</div>
<div class="red">red</div>
</div>

If you need more resources, check out these links:

Helpful Links:

Creating a layout with two columns using CSS and setting the height to

Answer №1

Similar questions

Is there a way to send me the result of the radio input (Yes/No) via email?

Fade out the content using jQuery and simultaneously change the div

How to automatically scroll to the bottom using jquery/css

Expanding the size of one div causes the surrounding divs to shift positions

:active state not functioning correctly

Adjust the state based on the event in ReactJs

Align the bottom borders to the lowest content on each line

"Utilizing Jquery for interactive menu functionality - delivering the requested JSON

What is the best way to include a dialog div within a form tag?

I'm only seeing output on two of my input boxes - what's going on?

After relocating JavaScript code into modules, encountering an error stating 'Cannot read property ClassList of Undefined'

Unable to adjust the width of a label element using CSS specifically in Safari browsers

Animating the appearance and behavior of radio buttons using CSS transitions and JavaScript

Cordova Geolocation now displaying incorrect latitude and longitude values as NAN

Manipulate inherited CSS styles from an external source

How can you override the selected classes for menu items in Material-UI using React.js?

How can I use ngx-editor to insert an HTML block at the current cursor position by clicking a button?

when the window is scrolled a certain amount, use jQuery to scroll back in the opposite direction

Tips for maintaining horizontal alignment of menu links

Trouble with executing select query on connected tables in MySQL