g9hc_a
Last Updated: February 25, 2016
·
1.8K
· smikulic

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 =)

Say Thanks
Respond

2 Responses
Add your response

10434
7dedb03c52d9b14738f844c799b2dbc4

For IE9 and up maybe exist better solutions, but i think you make a really good example for IE8.

over 1 year ago ·
10756
217a0fb03256eb547292f2063a27dc95

CSS is fiddly at the best of times, this worked a treat for my purposes. Just awesome.

over 1 year ago ·