Margin on next div not working with floated above div - css

Question

I have a side by side 50% divs. Under I have a content div where I have applied a margin-top 60px. That margin is not working.
<div class="sbs50">
Left Side
</div>
<div class="sbs50">
Right Side
</div>
<div class="content-section">
Content Section
</div>
Css
.sbs50
{
float: left;
width: 50%;
}
.content-section
{
margin-top: 60px;
border: 1px solid green;
}
I tried adding the following but is not working
.sbs50:after
{
content:'';
display:block;
clear: both;
}
How can I fix the margin not working?
Here is my fiddle

Answer 1

Just add the margin to the bottom of the sbs50 class and clear the floats for .content-section class. Like this:
.sbs50 {
float: left;
width: 50%;
margin-bottom:50px;
}
.content-section {
border: 1px solid green;
display:block;
clear: both;
float:none;
background:#ccc;
}
See fiddle
Alternative:
Use the typical clear method, basically you add a div which clears every float. So your HTML looks like this:
<div class="sbs50">Left Side</div>
<div class="sbs50">Right Side</div>
<div class="clearfix"></div><!-- added div -->
<div class="content-section">Content Section</div>
and your CSS like this:
.sbs50 {
float: left;
width: 50%;
}
.clearfix {
display:block;
clear: both;
float:none;
}
.content-section {
border: 1px solid green;
margin-top:200px;
background:#ccc;
}
See fiddle for this example
This is a more common approach since you simply clear elements and then style the subsequent elements as you wish, but you can use any of these approaches and they will work equally well

Answer 2

This works:
.content-section {
margin-top: 20px;
border: 1px solid green;
float: left;
width: 100%;
}
but I am not sure if you want to set the width yourself.