CSS3で困ってます！
現在、HTML5でサイト書き出し中です。CSS3も使っているのですが、大きな問題が発生いたしまして…
背景のボックスの大きさがbodyの大きさに追随しないんです。ボックスからINFOMATION欄などが飛び出してしまってデザイン的によろしくない感じです。
ボックス要素は、divのidのtopに対して与えています。topはペ0次全部のコンテンツをまとめるためのものです。
今日一日、CSSのソースとにらめっこしたのですがわかりませんでした。皆さんなら、わかると思い頼らせて頂くことにいたしました。どこが間違っているかわかりません！教えてください（涙）
CSSは、
@charset "utf-8";
/* CSS Document */
*{
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
a{
text-decoration:none;
}
div#top{
width: 920px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-o-border-radius: 15px;
box-shadow: 3px 3px 10px #666;
-moz-box-shadow: 3px 3px 10px #666;
-webkit-box-shadow: 3px 3px 10px #666;
-o-box-shadow: 3px 3px 10px #666;
text-align:left;
margin:0 auto;
}
div#header{
text-align:center;
}
div#banner{
width: 900px;
margin: 0px auto;
}
div#menu{
width: 900px;
margin: 0px auto;
}
div#menu ul {
float:left;
margin:0;
padding:0;
height: 40px;
text-align:center;
}
div#menu li {
margin:0;
padding:0;
float:left;
font-size:90%;
text-align:center;
list-style-type:none;
width: 225px;
-webkit-transition-property: background-color;
-webkit-transition-duration: 0.25s;
-moz-transition-property: background-color;
-moz-transition-duration: 0.25s;
-o-transition-property: background-color;
-o-transition-duration: 0.25s;
background-color: #3C0;
height: 40px;
}
div#menu li span {
font-family:verdana;
font-size:140%;
color:#fff;
line-height: 40px;
}
div#menu li:hover{
background-color: #0F0;
}
div#contents{
width:900px;
height: auto;
margin:0 auto;
padding: 10px 0;
}
div#info {
float:left;
width:450px;
}
div#info h2{
font-size: 25px;
width: 450px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-o-border-radius: 15px;
background-color:#090;
color: #FFF;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
padding-top: 2px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 10px;
margin-top: 0px;
text-align:left;
}
div#info dl dt {
clear:left;
float:left;
width:7em;
padding:10px 0.5em;
}
div#info dl dd {
margin-left:0;
padding:10px 0.5em 10px 8em;
background:#fff url(images/bg_info_line.gif) 0 100% repeat-x;
}
div#news{
float: right;
width: 430px;
text-align:left;
}
こんな感じです。
実際のページはここにあります。
http://skino.cyber-ninja.jp/test/
お礼
ありがとうございます。 float:leftを取ったらセンタリングできました。 でもfloat:leftがないと横に段組ができないので 横の段組でセンタリングするには どうしたらいいのでしょうね(^^;)