Equal column fluid height and fluid width column layout using CSS

Question

I'm wanting to create an equal fluid height, equal fluid width two column layout panel.

At the moment I'm using the psuedo-element solution proposed here: http://webdesign.tutsplus.com/tutorials/quick-tip-solving-the-equal-height-column-conundrum--cms-20403 to create the equal height columns which works perfect. And I'm using a width of 50% for each of the columns, floated to create the column layout.

The site I'm building has content set at a max-width of 1200px, so I need a container within each column to be set at a max-width of 600px. At the moment I'm floating a container inside the left-hand column right, and one in the right-hand column left but it doesn't seem to be working. The max-width is being ignored, so the containers don't have a width at all.

I'm wanting to keep the overall content of the columns in center of the page aligning with the content at max-width: 1200px above and below.

Please note I want the column wrapper to fill the full width of the screen, not a max-width.

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

I have a fiddle here that show's where I am at the minute: http://jsfiddle.net/dr4up5q3/4/

Any help would be greafully received.

Answer 1

It seems by adding the styles below .cta-content does the trick.

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

Updated fiddle here for those who need a similar solution: http://jsfiddle.net/dr4up5q3/6/