<div id="one">
</div>
<div id="two">
</div>
<div id="three" class="clearfix">
</div>

#one {
    float:left;
}

#two {
    float:right;
}

.clearfix {
    clear:both;
}

#three {
    margin-top: 20px;
}

<div id="container">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="three"></div>

#container {
    overflow:hidden;
}
#one {
    float:left;
}
#two {
    float:right;
}
#three {
    margin-top: 20px;
}​

padding-top : 20px

position: relative;
top: 20px;

padding-bottom: 20px;

#two:after {
    content : "";
    clear   : both;
    display : block;
    height  : 20px; // or margin-bottom: 20px;
 }

<div style='overflow:hidden'>
  <div id="one">Left</div>
  <div id="two">Right</div>
</div>
<div id="three" class="clearfix">// your data </div>

<div class="row">
    <div id="one">
        a
    </div>
    <div id="two">
        b
    </div>
</div>

<div id="three">
    c
</div>

#one {
    float:left;
}
#two {
    float:right;
}
clearfix {
    clear:both;
}
.row{ overflow: hidden; border: 1px solid red; }
#three {
    margin-top: 40px;  border: 1px solid green;
}