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」の何れかを指定

リストメニューを横並びに

li { display:inline; margin:0; padding:0 }

ブロック要素からインライン要素へ。

改行されなくなり、横並びに。

background: transparent について

特に背景色を指定しない場合の背景はtransparent　

ユーザが独自の設定をしている場合があるので、敢えて　background: transparent を指定する。