Divs should be of consistent and adjustable height

Question

Divs should be of consistent and adjustable height

I am in need of a layout with three columns:

left column (with a red background)
center column (with a yellow background)
right column (with a black background)

This is the HTML structure I have in mind:

<div id="container">
    <div id="left_column">
        <p>text</p>
    </div>

    <div id="center_column">
        <p>loooooong text</p>
        <p>other text</p>
    </div>

    <div id="right_column">
    </div>
</div>

I want all columns to have flexible heights and be the same height

I attempted a demo which can be found here http://jsfiddle.net/4hj4f/8/, but the CSS is not working correctly as the columns end up with different heights.

css

Answer 1

Answer №1

To achieve this functionality, you can utilize the display:table property. Implement it as follows:

body, html{height:100%}
#container {
    height: 100%;   
   display:table;    
}

#left_column, #center_column, #right_column {
    display: table-cell;
    width: 200px;
    height: 100%;
    vertical-align:top;
}

For a demonstration, see this http://jsfiddle.net/4hj4f/9/

Answer 2

To achieve this functionality, you can utilize the display:table property. Implement it as follows:

body, html{height:100%}
#container {
    height: 100%;   
   display:table;    
}

#left_column, #center_column, #right_column {
    display: table-cell;
    width: 200px;
    height: 100%;
    vertical-align:top;
}

For a demonstration, see this http://jsfiddle.net/4hj4f/9/

Answer 3

Answer №2

Adjust the height of the container to meet your requirements.

#container {
height: 600px;            
}

See a live demonstration here: fiddle

Answer 4

Adjust the height of the container to meet your requirements.

#container {
height: 600px;            
}

See a live demonstration here: fiddle

Divs should be of consistent and adjustable height

Answer №1

Answer №2

Similar questions

How can I make multiple elements in the same column span across multiple rows with CSS Grid?

What is the best way to use a CSS selector to target multiple divs such as block-11, block-12, and so

Using jQuery to add a class to an image element when the source attribute contains a specific

Include a tab button within a vertical tab list using Angular Material

What is the best way to line up changing column values with changing row values in an HTML table?

What is the best way to create a self-referencing <div> in HTML?

Automatically close an element when you click on a different element

The Autoprefixer script crashes with the error message: TypeError - Patterns can only be a string or an array of strings

Utilize a combination of min-height percentages and pixels on a single div element

Float a div within text to be positioned vertically

Text that is superimposed onto an image

Retrieve data from a MySQL table based on a specific condition in PHP

The width of sibling divs in IE7 does not match their sibling's width

Steps to eliminate a horizontal scrollbar

The Flask form within the Bootstrap input-group is breaking onto a new line when viewed on mobile devices

Row in Internet Explorer 7

Angular component: Placing icons on the right side of a mat-chip element

Determine the position of an element in relation to a specific ancestor using JavaScript

Customize Bootstrap radio buttons to resemble standard buttons with added form validation styling

Expansive Offspring Division stretching to the Entire Vertical Length of its Guardian Division