Равная высота колонки и ширина колонки с использованием CSS

Question

Я хочу, чтобы создать равную высоту жидкости, равную ширину жидкости две колонки макета панели.

В настоящее время я использую решение psuedo-element, предложенное здесь: http://webdesign.tutsplus.com/tutorials/quick-tip-solving-the-equal-height-column-conundrum--cms-20403 для создания колонны равной высоты, которая работает идеально. И я использую ширину 50% для каждого из столбцов, плавающих для создания макета столбца.

Для сайта, который я создаю, контент имеет максимальную ширину 1200 пикселей, поэтому мне нужно, чтобы в каждом столбце был установлен контейнер с максимальной шириной 600 пикселей. В данный момент я перемещаю контейнер в левый столбец справа, а другой в правый столбец слева, но, похоже, он не работает. Максимальная ширина игнорируется, поэтому контейнеры вообще не имеют ширины.

Я хочу, чтобы общее содержимое столбцов в центре страницы совпадало с содержимым с максимальной шириной: 1200 пикселей выше и ниже.

Обратите внимание: я хочу, чтобы оболочка столбца занимала всю ширину экрана, а не максимальную ширину.

HTML:

<div class="col-wrapper">
    <div class="half-col-1">
        <div class="cta-content">
            <p>Column 1</p>
        </div>
    </div>
    <div class="half-col-2">
        <div class="cta-content">
            <p>Column 2</p>
        </div>
    </div>
</div>

CSS:

.content {
    max-width: 1200px;
    height: 30px;
    margin: 0 auto 20px;
    background: green;
}

.col-wrapper {
    overflow: hidden;
    position: relative;
    margin: 0 auto 20px;
}

.half-col-1 {
    width: 50%;
    float: left;
}

.half-col-2 {
    width: 50%;
    float: right;
}

.half-col-1:before, .half-col-2:before {
    width: 50%;
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
}

.half-col-1:before {
    background: blue;
    left: 0;
}

.half-col-2:before {
    background: red;
    left: 50%;
}

.cta-content {
    max-width: 600px;
    color: white;
    background: rgba(255,255,255,0.1); 
}

.half-col-1 .cta-content {
    float: right;
}

.half-col-2 .cta-content {
    float: left;
}

У меня есть скрипка, которая показывает, где я сейчас нахожусь: http://jsfiddle.net/dr4up5q3/4/

Любая помощь будет с благодарностью получена.

Answer 1

Кажется, добавив стили ниже .cta-contentделает трюк.

width: 100%;
max-width: 600px;

Обновленная скрипка для тех, кому нужно подобное решение: http://jsfiddle.net/dr4up5q3/6/