A design with three columns that stretch to 100% height using CSS styling

Question

A design with three columns that stretch to 100% height using CSS styling

I can't seem to figure out the CSS for this layout. Here is the HTML code I have:

<body>
    <div id="main">
        <div id="left">
            menu
        </div>
        <div id="middle">
        </div>
        <div id="right">
            sidebar
        </div>
    </div>
</body>

My goal is to create three columns - left, middle, and right with widths of 25%, 60%, and 15% respectively, all expanding to 100 percent height of their parent element (main). Additionally, I want the main div to have a minimum height equal to the browser window height and a maximum height based on its children.

css layout multiple-columns

Answer 1

Answer №1

If you want to achieve this layout using CSS tables, it can be done easily:

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.main {
    display: table;
    height: 100%;
    width: 100%;
}
.left, .middle, .right {
    display: table-cell;
    background-color: lightgray;
}
.left {
    width: 25%;
}
.middle {
    background-color: beige;
}
.right {
    width: 15%;
}

Check out the demo here: http://jsfiddle.net/audetwebdesign/9L8wJ/

To make sure the content fills the height of the viewport, start by setting height: 100% on the html and body elements.

Then, apply display: table to the parent container with height: 100%. Since this is a table, the value acts as a minimum and will fill the vertical screen unless the content is very long, in which case the table height will adjust accordingly.

Add specified widths to the left and right columns, while the middle column will automatically fill the remaining space without calculations.

Lastly, use display: table-cell for the child elements to complete the layout.

If necessary, you can add a wrapper around the content within each table cell for better control over white space between columns, depending on your specific layout and design preferences.

Answer 2

If you want to achieve this layout using CSS tables, it can be done easily:

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.main {
    display: table;
    height: 100%;
    width: 100%;
}
.left, .middle, .right {
    display: table-cell;
    background-color: lightgray;
}
.left {
    width: 25%;
}
.middle {
    background-color: beige;
}
.right {
    width: 15%;
}

Check out the demo here: http://jsfiddle.net/audetwebdesign/9L8wJ/

To make sure the content fills the height of the viewport, start by setting height: 100% on the html and body elements.

Then, apply display: table to the parent container with height: 100%. Since this is a table, the value acts as a minimum and will fill the vertical screen unless the content is very long, in which case the table height will adjust accordingly.

Add specified widths to the left and right columns, while the middle column will automatically fill the remaining space without calculations.

Lastly, use display: table-cell for the child elements to complete the layout.

If necessary, you can add a wrapper around the content within each table cell for better control over white space between columns, depending on your specific layout and design preferences.

A design with three columns that stretch to 100% height using CSS styling

Answer №1

Similar questions

How can the position of Bootgrid's pagination element be fixed in relation to its parent container, no matter how many table rows are present?

Disable the button on smaller devices

Utilizing Jquery for draggable/droppable functionality in combination with custom overflow styles

Arranging two divs to appear side by side, but they are mysteriously aligning in a diagonal pattern

Add a CSS style to an element when its parent container is hovered using Angular

Rotate CSS elements dynamically using jQuery

What could be the reason for this code not displaying buttons on separate lines rather than next to each other?

Most left-aligned icon on the left, most right-aligned icon on the right, and evenly spaced icons in between

The CSS theme toggler for Bootstrap

When hovering over a single list item, only the top border will be displayed without affecting the

Integrating fresh fonts into TinyMCE's font selection choices

Sending a value to CSS using a selector

What is the best way to incorporate a floating label into an input field?

When the mouse leaves, the input search will automatically change the text color to black

Rails Polymer is experiencing a glitch where the CSS and Polymer elements are not displaying correctly until a page refresh is

What is the best way to trigger a new css animation on an element that is already in the midst of

Difficulty with aligning input boxes in ASP.NET Core Razor Pages

Instead of modifying the selected class, jQuery generates inline styles

IE11 causing issues with CSS 3D animation playback

Add the application's logo image to the Ionic header along with a side menu