CSS - Column does not seem to grow with content

Question

I am trying to get to grips with CSS (it having been an aspect of dev that I have tried to avoid in the past) but I cannot get my head around what is going on here.

The Aim

Have a 2 column layout, always at least full page height, but grows if the content dictates

EDIT: Both columns should be equal height, too i.e. both grow to largest.

Problem

When the content is less than a page, it remains at full height as is my intention. However in a situation like the fiddle below where the content is longer than a page, whilst the page scrolls, the backgrounds do not flow with the content.

enter image description here

JSFiddle http://jsfiddle.net/tDSAg/

HTML

<header>
    <div class="header-inner">Header</div>
</header>
<div id="outer">
<div class="col1">
    <p>Start</p>
    <p>Col1</p>
    <p>End</p>
</div>
<div class="col2">
    <p>Start</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>Col2</p>
    <p>End</p>
</div>

CSS

html, body
{
    height: 100%;
}

#outer
{
    min-height: 100%;
    background-color: red;
    height: 100%;
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.col1
{
    background-color: green;
    width: 220px;
    float: left;
    min-height: 100%;
    height: 100%;
    margin-right: 10px;
}

.col2
{
    background-color: aliceblue;
    width: 770px;
    float: left;
    min-height: 100%;
    height: 100%;
}
header {
   background-color: orange;
}
.header-inner {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

I'm not (whatever a clearfix is!) - @pallandt - I'm afraid that is just loading as a dupe of the fiddle I posted, with no amendments? — glosrob, Nov 23 '13 at 20:52
The clearfix will only expand your 2nd column, just realized you want both columns to expand equally. You can achieve that with either a JS script, or attempt to do it via CSS only. See this for example: http://stackoverflow.com/questions/14763363/how-to-create-equal-height-columns-in-pure-css — , Nov 23 '13 at 21:06
For a javascript + jquery based solution take a look at: http://www.jainaewen.com/files/javascript/jquery/equal-height-columns.html#demonstrations — , Nov 23 '13 at 21:08

Oriol · Accepted Answer · 2013-11-23T21:10:56.640

Note that this answer is only a trick which works on old browsers, but nowadays the right way of doing it is using display: table-cell, like others have answered.

You can use the following trick:

#outer {
    min-height: 100%;
    overflow: hidden;
}
.col {
    margin-bottom: -10000cm;
    padding-bottom: 10000cm;
}

Demo

The trick sets a big padding to all columns (in this case 10000cm, note it must be a number larger than the height of the tallest column), and removes extra space with a negative margin. But columns with less height will gain height (in fact, it's part of the padding).

score 1 · Answer 2 · answered Nov 23 '13 at 20:59

The trick to have both columns at same height is a very classic one.

You can either:

Use the faux-columns trick (http://alistapart.com/article/fauxcolumns)
Use the more modern table layout with css (using display: table, display: table-row, display: table-cell)

score 0 · Answer 3 · answered Nov 23 '13 at 20:52

See the updated example here. To be honest I also am just trying to learn stuff about CSS so I'm not able to give you good explanation, but one thing is for sure, here :

.col1 {
    background-color: green;
    width: 220px;
    float: left;
    min-height: 100%;
    height: 100%;
    margin-right: 10px;
}

you should leave only min-height. I've also made some other changes, don't know if they have any impact though. It's tricky with this - height: 100% I've also got the impression that this does in fact guarantee a 100% of the content height no matter what but recently I played a bit and it seems to calculate those 100% based on the screen height and when you fix it with height:100% if you have HD res for example - 1080px - that's it. You are stuck with 1080px which are 100% of the height but if you leave it ,min-height: 100% then I think you get at least 1080p.

Thank you for your reply - that is very nearly there! The issue is that the left column is not growing with the right. I should have been more specific. — glosrob, Nov 23 '13 at 20:53
As @Kustolovic wrote, I also think that one very common option is to use table or `display: table`, which I personally find a little confusing. There's no clear CSS way to resolve this. I've researched a lot and to save you some time - if you want more CSS-like approach, then use tables, either - use jQuery document ready and resize to always keep the both heights equal. I chose the jQuery option. — Leron, Nov 23 '13 at 21:03

CSS - Column does not seem to grow with content

3 Answers3

Linked