使用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/