Designing a 100% background layout.

[robin9000]

I'd like to know if there is a way to make the following work?


#content
{
margin: auto;
width: 80%;
height:100%;
background:#C5A665;
border-left: 7px solid #CDA439;
border-right: 7px solid #CDA439;
}

By saying height:100% The broser dose not understand this and dose not seem to be able to make sense of it or know what to do with it.

If you put a number in, in place of the 100% such as 500px it works but not 100%. Is there some kinda work around to make it understand that I would like it to take up 100% of the page? I'll give you an example page but in this instance it's not a very good example becasuse the data dose the job of filling the page and thus the background exstends to the bottom but for pages where I would like to use it and there is not enough text to extend it to the bottom of the page I need to know how to make this work. So here is the example:

www.robinsden.110mb.com

also if you have IE explorer could you let me know if my menu shows correctly for you. It dose not show right for me right now in IE only Firefox.

Thanks.

[bluewalrus]

okay declare the height of the html and body before it so it knows. I think will do it


html {height: 100%;}
body {
background-color: #996600;
background-image:url(../banner/mainbg.jpg);
margin: 0 auto;
width: 100%;
height: 100%;
border: none;
background-repeat: repeat-x;
background-position:top, center;
}

#content
{
margin: 0 auto;
width: 80%;
text-align: left;
background:#C5A665;
border-left: 7px solid #CDA439;
border-right: 7px solid #CDA439;
}

[robin9000]

On less I missed somthing, that's exactly what I have right now. Maybe I did not explain my self very good though. If I did not I am sorry about the confushion the part of the background that I am trying to make extend 100% is the solid light brown behind the text. If you view my index page you will see.

http://www.robinsden.110mb.com/index.php

[bluewalrus]

you have it in the reverse order or did. it reads from top to bottom so having in wrong order like say... in this order the content will be red
background blue;
background green;
background red;
However in this order it will be blue
background green;
background red;
background blue;

[Nile]

But in this order it will be red:


background: red !important;
background: green;

[robin9000]

I am not sure how to do it but can I make say a sub class for the body.

I already have the ferthest background color the one that fades. but for the one solid light brown one can I make a sub body class for it. and make it work that way?

Ok I made a test page.

http://robinsden.110mb.com/testpage.php

there you can see the brown dose not continue all the way down the page. It only goes as far as the writting.

[bluewalrus]

Okay here first post missed it cause code you put wasn't on your actual page.


/*background layout starts*/
#content
{
margin: 0 auto;
width: 80%;
text-align: left;
background:#C5A665;
border-left: 7px solid #CDA439;
border-right: 7px solid #CDA439;
}

html {height: 100%;}
body {
background-color: #996600;
background-image:url(../banner/mainbg.jpg);
margin: 0 auto;
width: 100%;
height: 100%;
border: none;
background-repeat: repeat-x;
background-position:top, center;
}


I said put it in this order:


/*background layout starts*/
html {height: 100%;}
body {
background-color: #996600;
background-image:url(../banner/mainbg.jpg);
margin: 0 auto;
width: 100%;
height: 100%;
border: none;
background-repeat: repeat-x;
background-position:top, center;
}
#content
{
margin: 0 auto;
width: 80%;
text-align: left;
background:#C5A665;
border-left: 7px solid #CDA439;
border-right: 7px solid #CDA439;
height: 100%;
}


or you could


#content
{
margin: 0 auto;
width: 80%;
text-align: left;
background:#C5A665;
border-left: 7px solid #CDA439;
border-right: 7px solid #CDA439;
}

html {height: 100%;}
body {
background-color: #996600;
background-image:url(../banner/mainbg.jpg);
margin: 0 auto;
width: 100%;
height: 100%;
border: none;
background-repeat: repeat-x;
background-position:top, center;
}
#content
{
height: 100%;
}