<div id="container1">
    <div id="left11">左</div>
    <div id="right1">右</div>
    <div id="footer1">フッター</div>
</div>

#left1  {
       width: 100px;
       float: left;
       margin-bottom: 5px;
       border: 1px solid black;
}
#right1 {
       width: 100px;
       float: left;
       margin-left: 5px;
       margin-bottom: 5px;
       border: 1px solid black;
}

#footer1 {
       clear: both;
       width: 207px;
       border: 1px solid black;
}

左右のコンテンツとフッターに隙間を空ける為、左右にmargin-bottom: 5px;を設定しています。

<div id="container2">
    <div id="contents2">
        <div id="left2">左</div>
        <div id="right2">右</div>
        <p id="clear2">float解除</p>
    </div>
</div>