CSS styling BODY tag issue

I havent done any CSS / HTML development in a long time and im having some issues with styling the body tag using CSS.

What im aiming to do is have the HTML tag styled with a background colour, then styling the body tag to be 80% width and a different background colour which all works fine.

The problem is that the background colour only goes one screen height down then ends and I cant seem to figure out why!

My CSS is:

body { 
    width: 80%; 
    margin-left:auto; 
    margin-right: auto; 
    min-height:100%;
    height:100%;
    background-color: #FFFFFF;
    border-radius: 20px;
    -moz-border-radius: 20px
}

html { 
    background-color: #000000;
    height: 100%
}

header,nav,article {                            
    display: block
}

nav {
    float: left; 
    width: 20%
}

article {
    float: right; 
    width: 79%
}

Any suggestions would be great, thanks.

EDIT: After all the suggestio开发者_JAVA技巧ns here the best result i could get with my CSS looks like this:

#content 
{ 
    width: 80%; 
    margin-left:auto; 
    margin-right: auto; 
    height:100%;
    min-height:500px;
    background-color: #FFFFFF;
    border-radius: 20px;
    -moz-border-radius: 20px;


}

html,body
{
    background-color: #000000;
    margin:0;
    padding:0;
    height: 100%;

}

header,nav,article 
{                           
    display: block
}

nav 
{
    float: left; 
    width: 20%
}

article 
{
    float: right; 
    width: 79%
}

Its still not doing what I want but this is the CSS that works best with the wrapper so far

the background colour only goes one screen height down then ends and I cant seem to figure out why!

Here's why:

body { 
    height:100%;
}

html { 
    height: 100%;
}

Ask yourself: 100% of what? The answer is not 100% of the content. Percentage heights always refer to a percentage of the height of the parent element. Since you have not set any explicit heights (in pixels), the browser uses the height of the viewport and calculates the height body to be 100% of that.

The viewport is the viewable area inside your browser. Since your content extends below this area (i.e., you have to scroll down to see it all), it ends up outside the body and therefore outside the background color set on the body.

If you don't specify a height for html or body, they will only be as tall as the content, but the background for html will still fill the viewport.

So the solution is this:

html {
    height:100%; 
    /* sets html to height of viewport 
      (bg color will still cover viewport) */
}
body {
    /* don't set explicit height */

    min-height:100%;
    /* expands body to height of html,
       but allows it to expand further
       if content is taller than viewport */
}

You don't need any additional content elements; the body behaves like any other element. Only html is a bit different since its background-color will cover the whole viewport even if the calculated height is different from the viewport or any child elements.

You may need some hacks to handle older browsers that don't understand min-height.

This is the case because you've explicitly set the height of the body element to 100%; you only need the min-height attribute if it should always be at least one screen high.

I would also not resize the body element to 80% width, I'd rather use a element inside the body for this.

There might be a few issues:

Firstly, try swapping min-height and height because by setting height after min-height you are effectively overriding min-height.

Secondly, check your browser, ie 7 and below I belive don't support min-height, try w3schools examples to see if theirs work properly on your browser.

Thirdly, you may want to wrap your content in either content tabs for html5 (with ie hack) or in a div class="content" because ie. again won't display the body tag correctly.

Lastly, I'd set min-height to an arbritary amount for example 500px because 100% will just make sure it is large enough to hold the content within.

height: 100%; min-height: 500px;

Give the body only a background color and put a wrapping div around your content. Styling this wrapping div is the better way if you want center the complete content as set bodies width to 80%. The way with the wrapping div makes the round corner also easier.

An example of the resulting html:

<body>
<div id="wrapper">
.... Your content ....
</div> <!-- end of #wrapper -->
</body>