100 percent width, 100 percent height css

[fjm]

Hello everyone,


I have a question regarding css where I would like to know if it is possible to break up a page into thirds for the height. I need to have a page that will be 100% in height and 100% in width. The height will be broken down into thirds; 20% for the header image, 75% for the content and the remaining 5% for the footer image.

I am not a real big css buff and have always used tables for everything until recently when I started validating all of my html. Part of what is so frustrating to me with regard to css is the fact that what works in one browser will not work in another browser. How do you guys remember all the hacks?

My needs are actually pretty simple. I need this to work in either IE 6, IE7 and FF. That is all.

What I have is a div container that is set to 100% height and 100% width. Inside of that div, I have a table that uses css to stretch it 100% high and 100% wide. It works perfect..

The problem I am having is that when I try and devide the 3 table rows (header, content and footer) it will not render correctly. I can't even see my header image unless I set the height to about 90%.

Would someone please give me a hand?

Thanks,

Frank

[dlite922]

It takes some getting use to. I convert it from tables to divs about a year ago and at first it was a pain, but I think at the end its worth it.

Now I only use tables for actually tabular data, if there is any, in the page, but the layout is all Divs.

It has almost become a standard to first enclose ALL your site data (from body tag to body tag) inside one div.

Inside there, you'll have three main sections like you mentioned, BUT it is a bad idea to divide them percentage wise.

Your header is usually constant, and leave it at a FIXED height (in em or px) or set it at auto and let the content of the header hold it down.

Same with the footer.

the "content" section (the middle section) (don't call it body for obvious reasons), is the most variable height and you should set its height to "auto".

This will rap around.

Avoid using position: absolute, its a headache and will cause you alot of issues between browsers.

Other issues are with margins. use padding as much as you can instead of margins, because IE parses margins differently.

For example, you'll see that a text area in your content is shifted to the right even if you set its margin to 0, while FF, does not do it.

This is usually because some of its parent tags, or the content section are have a margin.

In summary, use padding unless you have a background for it.

Try to make everything work with position: relative, float: left, or clear: both.

Since you didn't provide any code, i can't help you out, here's a really good site that puts most of your problem in one page.

Follow the links to go the actual site that addresses the problem, this is just a list:

http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html

Good luck,


Dan

[fjm]

Hi Dan, thank you so much for the pointers and the help! I will certainly keep those in mind. I am absolutely stumped over why this will not work. Since I have posted this, I have been to several other forum sites and have gotten ideas and some things work in IE and others don't in FF. Here is my actual code:

html,body		{background-color:#ffffff; margin:0; padding:0; height:100%; border:none; font-size: 11px; font-family: "Trebuchet MS", "Times New Roman", Arial, Times, serif;}
table#container  {width:100%; height:100%; margin:auto;}
tr#headerbg	  {background-image: url('../../images/headerbg.gif'); background-repeat: repeat-x; vertical-align: bottom;}
td#headerheight  {vertical-align: bottom; line-height: 0;}
div#headerlogo   {background-image: url('../../images/header.gif'); background-repeat: no-repeat; vertical-align: bottom;}

tr#contentbg	 {height:80%; background-color: #fff7f7; vertical-align: top;}
td#contentheight {height:80%; vertical-align: top; line-height: 0; vertical-align: top;}

tr#footerbg	  {height:3%; background-color: #0a326b; vertical-align: bottom;}
td#footerheight  {height:3%; vertical-align: bottom; line-height: 0;}

I absolutely agree with you about using px size instead of percentage. Even still, I cannot get the images to display; especially the header. The footer displays just fine.

Thanks a million,

Frank

[fjm]

Wow, I was able to get it working by dumping the table design and using divs. I have a second question though.

In a div, I am using a background image. The image is about 300px. Because I am using a 100% width, I need an image to complete the rest of the image.

Here is what draws the image. I need a second image to pick up where this one leaves off.

#header	{width: 100%; height: 12%; min-height:0; background-image: url('../../images/header.gif'); background-repeat: no-repeat;}

How would I do this? Should I create a nested div?

[fjm]

Yes Frank, a nested div is what you need.

:)