Question

I’m trying to make a simple web page but i cant get the page to wrap in the body section, scroll bar or no. The text on the page keeps on going into infinity. The CSS sheet is as follows:

@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;
}

The content i put into the HTML #body div keeps going, despite the container and wont go to the next line. Further, the text goes on top of the youtube div i have, between that and the border of the top nav bar(navbar) above it. Is there a correct way to space it out? putting a margin there only moves the youtube div further down. Any help appreciated, feel free to ask for further clarification.

Answer 1

Try removing white-space: nowrap; from #body.

You can read more about the white-space property here: http://www.w3schools.com/cssref/pr_text_white-space.asp