Multi-column 100% height (content follows baseline)

Hi,

Since I came across many answers to the problem of adjusting height of 2 or more columns to 100% and positioning either columns content to the bottom without vertical-align (submit button that follows form inputs) I decided to write an all around solution which wraps these two together, and with as little code as possible based on table, table-cell and without float properties.

I should mention it is fluid so no worries there, and it works in IE8+ (table-cell is not supported in older versions of IE).

If you need more than 2 columns, you can add another column element and just change the width in CSS accordingly (example: 3 columns should have width: 33.3333%; etc.) and you can also apply your own clearfix to the container element in which case you should remove cf class as well. Also, here is fiddle for live example.

If you want to read more about this solution or see other examples visit this awesome link.

HTML

<div class="container cf">
    <div class="column col1">
        <h2>Column 1</h2>
        <p>Lorem ipsum text1</p>
        <a class="bottom-element" href="">Action</a>
    </div>
    <div class="column col2">
        <h2>Column 2</h2>
        <p>
        Lorem ipsum text2, Lorem ipsum text2, Lorem ipsum text2, 
        Lorem ipsum text2
        </p>
        <p>
        Lorem ipsum text2, Lorem ipsum text2, Lorem ipsum text2, 
        Lorem ipsum text2, Lorem ipsum text2, Lorem ipsum text2, 
        Lorem ipsum text2, Lorem ipsum text2
        </p>
    </div>
</div>

CSS

.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.container {
    display:table;
}
.column {
    display:table-cell;
    position: relative;
    padding: 4px;
    width: 50%;
}
.col1 { background: #48b5f9; }
.col2 { background: #edc682; }

.bottom-element {
    position: absolute;
    bottom: 15px;
    right: 15px;
}

table and table-cell set the behavior of elements to be like basic HTML table, which enables us to use vertical-align on all content inside certain column, and position: relative; on columns enables us to position bottom-element with absolute and apply positioning relative to outer div.

Hope it was helpful and if you have any suggestions or a better solution write a comment =)