Height help

Hello.

A few people have mentioned that my site looks a bit odd when viewed on a higher resolution screen.
Is there any way I can fix this in the css?
Here is the part of the css that I am using now:

#page {
	margin: auto;
	width: 696px;
	overflow: hidden;	

Code (markup):

Your help is appreciated - thank you.

 

What do they/you mean when you say it looks odd?

Can't fix anything unless we know what the problem is....

 

When viewed on a large screen, it doesn't stretch to the height.

 

OK...

Presumably you want #container to stretch to the height of the page. Because this does not include the header and the footer, lets say we want it to have a 80% height.

80% of what however? If we mean the page then all parent items must have height defined also. The only elements it is in, is the body and html so we add to your stylesheet:

html {height:100%;}
body {height:100%;}
#container {height:80%;}


Now, html is 100% height. Body is nested in html and also has 100% height. Container is nested in body and has 80% height of the body. Tried to explain it so you understand how it works, hopefully that helps.

But that should do it anyway...

 

Thank you for that.
Do I just add that code to the css, or do I have to replace the original code with yours?
Thanks again.

 

Just add it.