3 columns layout need to be equal in height

Question

I want to use a simple layout, sidebar, subsidebar and the main content, all columns need to be the same in height. Here's when I get stuk, the columns need to be min- screen height if they are empty, and if 1 column has an element/content the other columns need to be the same height.

// het idea

<div id="container">

    needs to be min-heigth 100%

    <div id="sidebar">

        needs to be 40px width

    </div>
    <div id="subsidebar">

        needs to be 200px width

    </div>
    <div id="content">

        needs to be 100% width
        <div class="some-element-is-3000">
            3000px height(example)
        </div>
    </div>
</div>

no this is not the same, I am looking for a layout that has NOT a fixed height. The layout must be a minimum of 100% screen height. — user759235, Feb 19 '14 at 18:23

Zword · Accepted Answer · 2014-02-19T18:28:52.863

Try the below fiddle.It uses display:table; and display:table-cell;:

CSS

html,body,#container{
    width:100%;
    height:100%;
}
#container{
    display:table;
}
#sidebar,#subsidebar,#content{
    border:1px solid black;
    display:table-cell;
}
#sidebar{
    min-width:40px;
}
#subsidebar{
    min-width:200px;
}
#content{
    width:100%;
}

Fiddle with all three divs with less contents Fiddle
Fiddle with content div exceeding window height Fiddle

3 columns layout need to be equal in height

1 Answers1