HTML: сделать все 3 столбца равными по высоте (автоматическое изменение размера)

Ниже приведен шаблон шаблона веб-макета с тремя столбцами с разделителями заголовка и нижнего колонтитула.

Первичный столбец преднамеренно первыми указан в html, чтобы убедиться, что он имеет наилучшее возможное размещение с точки зрения SEO.

Текущий код имеет следующие два недостатка:

1. Каждый div только до тех пор, пока он требует содержимого, и поэтому можно видеть, что они имеют неравную длину, если используется фоновый цвет.
2. Если страница только короткая (например, "Спасибо, ваше сообщение отправлено"), нижний колонтитул заканчивается на половине пути вниз, и я предпочел бы, чтобы он появился в нижней части порта представления в этом случае, при этом левая и правая divs расширяются, чтобы поддерживать согласованность.

Я также создал jsfiddle здесь, но исходный код ниже для полноты картины.

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%;
}

Как я могу преодолеть две проблемы, упомянутые выше, пожалуйста?