※ ChatGPTを利用し、要約された質問です（原文：CSS3で困ってます！）
CSS3で困ってます！
このQ&Aのポイント
HTML5でサイトを作成中にCSS3での問題が発生しています。
背景のボックスの大きさがbodyの大きさに追随しないため、デザイン的に問題があります。
CSSのソースを調べましたが、問題の解決方法がわかりません。皆さんのアドバイスをお待ちしています。
現在、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/
お礼
マジ!? あっ…すいません取り乱しました。ご回答ありがとうございます。 そうですか…構文が無茶苦茶なんですか。前に作ったホームページを参考に作ったのでそうなってしまったのかもしれません。前のやつは、XHTML 1.0 Transitionalで作っていたので… HTML5の認識は、単にFlash無しでビデオ再生できるとかそう言うだけだと思っていたので他のシリーズと大差は無いだろうと思って作っていました。実に浅はかでした。駆け出しの超アマチュアレベル（いやそれ以下かも…）なので、こんなことになってしまいました。ご指摘頂いた点を踏まえつつ、しっかり調べながら一から作り直します！
補足
先ほど問題が解決しました！ 結局のところ、CSSのcontents以下newsまでをそれぞれbox化して、それを左右に並べ右だけをPaddingで左のボックスから少し話すことでレイアウトを崩さずに2つの要素を横に並べれました。背景の問題も解決されました。 当方の調べによれば、HTML5においてもレイアウト面ではdivは必要であるとの記事を多数発見しました。質問者様のご指摘と食い違いがありこれまた悩むところであります。 素人の僕には、まだdivは使わざるを得ないのかもしれません…