Columns Alignment in CSS

Question

I guess this is a simple one, but still I have a little problem with this, since I'm a little bit new with CSS. I want the columns align with the longest column.

JSFiddle

HTML:

<div class="main">
    <div class="header">
        Header Title
    </div>
    <div class="left_col"></div>
    <div class="main_col"></div>
    <div class="right_col"></div>
</div>

CSS:

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
}

.header {
    padding: 10px;
    background-color: yellow;
    min-width: 200px;
    font-size: 30px;
}

.left_col {
    background-color: cyan;
    width: 15%;
    padding: 10px;
    float: left;
    font-size: 12px;
}

.main_col {
    background-color: salmon;
    width: 70%;
    padding: 10px;
    font-size: 12px;
    float: left;
}

.right_col {
    background-color: greenyellow;
    width: 15%;
    padding: 10px;
    float: right;
    font-size: 12px;
}

.main {
    width: 100%;
    height: 100%;
}

Answer 1

Use CSS tables.

Add a wrapper div around your columns with display:table and width: 100%

The table will need 100% height so we set a negative top margin on it to the height of the header, then we fix this with top padding with box-sizing:border-box.

Set display:table-cell on the columns

Demo with little content

Demo with lots of content

Markup

<div class="main">
    <div class="header">
        Header Title
    </div>
    <div class="wrapper">
        <div class="left_col">text</div>
        <div class="main_col">text</div>
        <div class="right_col">text.</div>
    </div>
</div>

CSS

html, body
{
    height: 100%;
    margin:0;padding:0;
}
.main {
    width: 100%;
    height: 100%;
    padding-top: 55px; /* height of header */
    margin-top: -55px; /* height of header */
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.header {
    padding: 10px;
    background-color: yellow;
    min-width: 200px;
    font-size: 30px;
}
.wrapper
{
    display:table;
    width: 100%;
    height: 100%;   
}
.left_col, .main_col, .right_col
{
    display: table-cell;
}
.left_col {
    background-color: cyan;
    width: 15%;
    padding: 10px;
    font-size: 12px;;
}

.main_col {
    background-color: salmon;
    width: 70%;
    padding: 10px;
    font-size: 12px;
}

.right_col {
    background-color: greenyellow;
    width: 15%;
    padding: 10px;
    font-size: 12px;
}

PS: If you only want the columns to take up the height of the tallest column - then the solution is even easier:

LIKE THIS

Answer 2

Solution demo

make main class hide the overflow,and use padding-bottom:xxx px;margin-bottom:-xxx px; trick to achieve it!

CSS

.main {
            width: 100%;
            height: 100%;
            overflow:hidden; /* added */
        }

.main_col {
            background-color: salmon;
            width: 70%;
            padding: 10px;
            font-size: 12px;
            float: left;
            padding-bottom:1000px; /* added */
            margin-bottom:-1000px; /* added */
        }