3 Column Layout(two of 3 columns won't float inside wrapper) - html

Question

The Obective here: Get column 2(skyblue) and column3(salmon) to float inside it's wrapper(green). The first column(lightgreen) is floated to the left, the second column(skyblue) is float left, and the third column(salmon) is floated right. What am I doing wrong here? Why are they sitting underneath my wrapper? I tried clear fixes and expanding the wrapper and can't get these columns to sit inside the container. Suggestions?
Demo - http://codepen.io/Chris-Brennan/pen/pJORJY
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#wrapperGreen {
margin: 0 auto;
width: 960px;
height: 700px;
background: green;
}
#mainContentLightgreen {
width: 520px;
height: 700px;
background: lightgreen;
}
#contentleftSkyblue {
width: 200px;
height: 600px;
background: skyblue;
float: left;
}
#contentrightSalmon {
width: 200px;
height: 600px;
background: salmon;
float: left;
}
#footer {
height: 100px;
background: black;
clear: both;
}
<div id="wrapperGreen">
<div id="mainContentLightgreen">
</div>
<div id="contentleftSkyblue">
</div>
<div id="contentrightSalmon">
</div>
<div id="footer">
</div>
</div>

Answer 1

I dont know if I've misunderstood but I think its the order in which you are writing them?
Does this solve your problem?
<div id ="wrapperGreen">
<div id="contentleftSkyblue">
</div>
<div id="contentrightSalmon">
</div>
<div id="mainContentLightgreen">
</div>
<div id="footer">
</div>
</div>

Answer 2

You don't set the float left in
#mainContentLightgreen{
width:520px;
height:700px;
background:lightgreen;
float: left;
}
look at this sample

Answer 3

Instead of float use display:inline-block; or display:table-row;
If CSS3 is an option and you are not to worried about compatibility you could use column-count.
Float is used literally for floating element's so that it break's the document flow.
Like for instance you wanted to float an image to the left and have text wrap around it.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.align {
display: inline-block;
vertical-align:top;
}
#wrapperGreen {
margin: 0 auto;
width: 960px;
height: 700px;
background: green;
}
#mainContentLightgreen {
width: 520px;
height: 700px;
background: lightgreen;
}
#contentleftSkyblue {
width: 200px;
height: 600px;
background: skyblue;
}
#contentrightSalmon {
width: 200px;
height: 600px;
background: salmon;
}
#footer {
height: 100px;
background: black;
clear: both;
}
<div id="wrapperGreen">
<div id="mainContentLightgreen" class="align">
</div>
<div id="contentleftSkyblue" class="align">
</div>
<div id="contentrightSalmon" class="align">
</div>
<div id="footer">
</div>
</div>

Answer 4

I got this to work, if I'm understanding you correctly by nesting the div's inside of one another. For example the salmon div inside the green wrapper
<div id ="wrapperGreen"><div id="contentrightSalmon"></div>
</div>