some text

you might want to have a menu here

Test page

Three columns and a footer

Some text

The general idea

I've put up this page as an example of the standard 3 columns page, but with a footer added that is as wide as the viewport of the graphical browser the page is seen in.

I think it works. Has to be tested though.

Tested?

Yes, if you wish it to work for you. It has to be tested in various browsers on various resolutions and screenwidths and in various sizes of viewports.

How else do you get to know what you're doing?

Also, varying the content length of both this main column and one or either of the side columns will add to knowledge on how this three column plus footer thingy works.

One thing

All of the columns push the footer down, which is good, but I can't get FireFox to extend the center column all the way to the footer, if that column is shorter than the initial hight of the viewport.
Also, if either of the side columns actually push the footer away from the bottom of the center column, there is a visual gap between those two. Ugly.

Oh well, needs a bit more study by those who might benefit from this example.

Note

This simple test page is setup in reply to a question in the usenet newsgroup alt.html: Help with CSS Layout.

I reused this example as an answer to a new question, again in the usenet newsgroup alt.html: CSS 100% height problem.

If you like this example and think it has been helpful, you might want to pay us a visit: at PretLetters main page or at Webdesign for a further reference on writing and designing for the World Wide Web. Mind you, the site is in Dutch.

Maybe the index of the test area, of which this page is part, is worth checking out too, since in that part of my site I play around a bit. There might be something worth your while related to the main topic of this current page.