How would I convert this table layout to divs/css?

Your real question seems to be "how do I get my main div to expand, and my footer to go to the bottom of the page.

Your real question seems to be "how do I get my main div to expand, and my footer to go to the bottom of the page. " And the answer is going to be: you can't do it with tables either, at least not if you use a doctype that specifies HTML 4.0 transitional or above. Yes, it works without a doctype, but that's because browsers enter their "quirks mode" in that case.

I believe you can do it with absolute positioning, and you've probably seen examples. Personally, I'd look more at an approach that uses fixed positioning for the footer, with a larger z-order so that it renders on top of the content, and then use a gradient effect to make the main content disappear behind it. Here's an example (created by someone far better than me): designbyfire.com.

Your "real question" characterization is correct except if the main content background was the same as the body background, it wouldn't matter. Also, it works with doctype html 4.0 transition is you add "html, body {height: 100%}". – btmorex Mar 29 '09 at 12:30 What do you mean with you can't do with tables either?

Simply specify html, body, table { height: 100% }; then specify fixed heights for the header and footer row. Please correct this in your post. – facildelembrar Apr 10 '09 at 16:18.

Here's my attempt. Seems OK on FF3 and IE8: Header Content Main Content Footer Content Note: The DOCTYPE is important and forces compatibility mode in IE.

Actually, that's fairly close. Unfortunately, when the main content is longer than the page height, footer is still at the bottom of the window, as opposed to the bottom of the content. – btmorex Mar 29 '09 at 12:50 Try using FooterStick to combat this... see my answer.

– alex Mar 29 '09 at 12:52.

For getting a footer to stick to the bottom of the page, depending on if content is larger than viewport height, or if content doesn't quite reach the bottom (but you still want the footer to appear at the bottom) try implementing FooterStick.

Alex, I believe I've tried that method. The problem is that the "wrapper" div expands, but the actual content div doesn't. So, in my example, you just get a bunch of vertical space filled with the body's background color.

If the background color = content bg color, it works, but otherwise it doesnt. – btmorex Mar 29 '09 at 13:01 what if you set the content div to height: 100%? – alex Mar 29 '09 at 22:14.

This can be done in non IE browsers. But on IE (at least IE7-), you need to use tables and preferably conditional comments. I haven't took the time to test, but try this and see if it works: On html, use a strict doctype.

Preferably xhtml like this and put this in the body: And on css: div. Header, div. Content, div.

Footer { position: absolute; } div. Header { top: 0; height: 20px; } div. Footer { bottom: 0; height: 20px; } div.

Content { top: 0; bottom: 0; /*can't remember if it was margin or padding, if one doesn't works, try the other*/ margin-top: 20px; margin-bottom: 20px; }.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.