HTML: Make all 3 columns equal height (auto-resizing)

Question

The following is a 3 column web layout template, with header and footer divs.

The primary column is intentionally the first listed in the html to ensure that it's content has the best possible placement from an SEO point of view.

The current code has the following two flaws:

1. Each div is only as long as it's content necessitates and therefore it can be seen that they are unequal lengths if a background colour is used.
2. If the page is only short (for example, "Thank you. Your message was sent"), then the footer ends up half way down the page and I would rather that it appeared at the bottom of the view-port in this instance, with the left and right divs being extended to maintain consistency.

I've also created a jsfiddle here but the initial code is below for completeness.

HTML:

<div class='layout'>
    <div class="header">
        domain.com
    </div>

    <div class="content">
        <div class="wrap">
            <div class="primary">
                Primary Content (centre column)
            </div>
            <div class="left-col">
                Left hand content
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.</p>
            </div>
        </div>
        <div class="right-col">
            Right hand content
        </div>
    </div>

    <div class="footer">
        <strong>&copy; All rights reserved</strong>
    </div>
</div>

CSS:

.layout {
    width: 90%;
    margin-left: 5%;
}

.header, .footer {
    border: 1px solid #999;
}

.footer {
    clear: both;
}

.primary {
    background: #FBA95E;
}

.left-col {
    background-color: #B9B9FF;
}

.right-col {
    background-color: #B9B9FF;
}

.header, .footer, .primary, .left-col, .right-col {
    padding: 10px 2%;
    margin: 5px 0;
}

.content {
    padding: 0;
    overflow: hidden;
}

.primary, .left-col, .right-col {
    margin-top: 0;
}

.wrap {
    float: left;
    width: 78%;
}

.primary {
    float: right;
    width: 65%;
    margin-left: 2%;
}

.left-col {
    float: left;
    width: 25%;
    text-align: center;
}

.right-col {
    float: right;
    width: 16.5%;
}

How can I overcome the two problems mentioned above please?

Answer 1

You could use position:absolute; bottom:0; for the footer.