floatボックスが親ボックスを突き破る問題

案1

htmlの部分
<div id="wrapper"><!-- wrapper -->
<div id="left">
floatの左側
</div>

<div id="right">
　floatの右側
</div>

<div id="clear"> </div>
</div><!-- End wrapper -->
CSSの部分
/* ********** content *********** */
#wrapper{
width:770px;
margin:auto;
background-color:#666;
border-left:5px solid #CC0000;
border-right:5px solid #CC0000;
border-bottom:5px solid #CC0000;
text-align:left;
}

/* ************ main *********** */
#right{
width:220px;
float:right;
background-color:#ccc;
}
#left{
width:550px;
float:left;
background-color:#ddd;
}
#clear {
clear:both;
}

案2

div.container {
border: 1px solid #000000;
overflow: hidden;
width: 100%;
}

div.left {
width: 45%;
float: left;
}

div.right {
width: 45%;
float: right;
}

コンテナブロックに「幅か高さ」を指定した後、overflowプロパティの値として「hidden/auto/scroll」の何れかを指定