Balancing a page

HTML & CSS
1

Someone on this site helped me with my index page, and I am most grateful. Now I want to get rid of the bottom “light” brown" area, and make it the “darker” brown…so it appears more balanced.

Having not created much of this I am at a loss. I tried a few tweaks here and there, but nada…
Any help would be appreciated…

2

The light brown colour is set on the <body> of your page, so to change it to the darker brown, you need to alter

body {
    background: #DEB887;  
    font-size:100%;
    margin:0;
    padding:0;
}

change #DEB887 to #97694F

3

I’m not sure if Barnum wants to completely replace the light brown. I read it as wanting the area beneath the grey footer and the bottom of the viewport to be dark brown, matching the width of #container. If so…

Firstly, give #container overflow:hidden; so that it clears the floated ul. This will remove the gap at the bottom. Then, unless you’d prefer to let the page end with nothing below #footer, add padding-bottom to #container of however much dark brown area you wish to appear at the bottom. e.g.

#container {
    background: none repeat scroll 0 0 #97694F;
    min-width: 990px;
    width: 95%;
    overflow: hidden; /* added */
    padding-bottom: 50px; /* added */
}

At present you have CSS for #container and other elements both in a separate stylesheet - styles.css - and in the embedded stylesheet within the head of your page. This could cause confusion and should be cleaned up but, for now, replace the CSS rule for #container in your embedded stylesheet - not styles.css - with the above.

Result:

4

Thanks…that did it. Appreciate all your help.