2

シンプルな Web ページを作成しようとしていますが、ページを本文セクションやスクロール バーで折り返すことができません。ページ上のテキストは無限に進み続けます。CSS シートは次のとおりです。

@charset "utf-8";

*{
background-color:#CCC;
margin:0;
padding:0;
}

body {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 15px;
    font-style: normal;
    color: #609;
    text-align:left;
}

#container
 {
    margin-left:auto;
    margin-right:auto;
    background-color: #CCC;
    height: 768px;
    width: 1366px;
    border: thin solid #FFF;
}

#header 
{
    height: 50px;
    width: 1214px;
    border-bottom-width: thin;
    border-bottom-style: solid;
    border-bottom-color: #FFF;
    clear: right;
    float: right;
    border-right-width: thin;
    border-right-style: solid;
    border-right-color: #FFF;
}

#sitelogo 
{
    float: left;
    height: 101px;
    width: 150px;
    border-bottom-width: thin;
    border-bottom-style: solid;
    border-right-color: #FFF;
    border-bottom-color: #FFF;
    border-left-color: #FFF;
    border-right-width: thin;
    border-right-style: solid;
    border-top-color: #FFF;
}

#lrftnavbar 
{
    clear:both ;
    float: left;
    height: 616px;
    width: 150px;
    border-right-width: thin;
    border-right-style: solid;
    border-right-color: #FFF;
}

#navbar
 {
    float: right;
    height: 50px;
    width: 1214px;
    border-bottom-width: thin;
    border-bottom-style: solid;
    border-bottom-color: #FFF;
    border-right-width: thin;
    border-right-style: solid;
    border-right-color: #FFF;
}

#footer
 {
    clear: both;
    float: left;
    height: 50px;
    width: 1353px;
    border-top-width: thin;
    border-top-style: solid;
    border-top-color: #FFF;
}

#body 
{
    background-color: #CCC;
    height: 610px;
    width: 1180px;
    white-space: nowrap;
    overflow: scroll;
    float: left;
    clear: none;
    padding: 15px; 
    margin:auto;
}

.new 
{
    font-size: 9px;
    font-style: italic;
    color: #630;
    background-color: #0FF;

}

#utube 
{
    background-color: #CCC;
    float: left;
    height: 240px;
    width: 320px;
    border: thin solid #FFF;
    margin-top: 0px;
    margin-right: 15px;
    margin-bottom: 15px;
    margin-left: 0px;
}

コンテナにもかかわらず、HTML #body div に入れたコンテンツは続行され、次の行に移動しません。さらに、テキストは、私が持っている youtube div の上にあり、それとその上の上部のナビゲーション バー (navbar) の境界線の間にあります。スペースを空ける正しい方法はありますか?そこにマージンを置くと、YouTube div がさらに下に移動するだけです。ご不明な点がございましたら、お気軽にお問い合わせください。

4

1 に答える 1