The Many CSS Page Layout Techniques
You may have noticed that CSS1 and CSS2 lack a column property so web page column layout is awkward at best. Well, like the opacity property, it's being put into the W3C CSS3 specification. Until that's what everyone has, we're stuck with silly workarounds and browser insanity.
The files below are only 4K to 5K; they are layout technique testing files. The CSS rules that each div uses will be found conveniently inside the div not just as online style declarations, but also as visible text in the on-screen div box. The files all contain footers even though the majority of sites we've seen don't have any footers. The footers don't dynamically move down (when you increase browser font size or play with the window) on any of the files except the 2- and 3-column-all-float-based-pages, thanks to W3C CSS1 and CSS2 specification naivete, so we had to use <br> codes and our advice to avoid footers being crashed into by expanding columns is: use enough <br> codes so the footers are still unviolated with browser font size temporarily set to 200%. Note that while floating is by far the best footer solution, using floats is rumored to create various problems, and you'll need hacks and workarounds for these if you happen to encounter them. Simple floated layouts seem to work fine, but complex ones reputedly don't act reliably cross-browser, and cramming lots of content into a floating div can get the div chopped off in some browsers. But they worked so well in our tests, perhaps it's worth it!
The 2-column relative-positioning-based page wins the prize for most problems at higher screen resolutions—but only in Netscape. The 3-column one isn't nearly as bad; go figure. The 3-column padding-based page is the biggest pain relative to fine-tuning the code—we even used a gray background to get it right. The 2-column one was fine though—meaning unproblematical.
Some CSS books and website programmer gurus have said that the padding method makes a good 2-column strategy and the margin method makes a good 3-column strategy. We have no experience to contradict this assertion. Other CSS books chicken out and avoid both the column and footer challenges altogether—can you believe that someone would write a CSS book without the word "column" in the index! Apparently, the people teaching us should design a few real layouts now and then, so they don't think of columns as not worth mentioning, since, after all, who would want those darn things anyway?
Using absolutely positioning, fixed-width, left and right columns and having a dynamically expanding center column is already a CSS classic. In such a case a right column with a left property of around 80% is popular, along with an unpositioned middle column with percentage-expressed margin sizes right and left (the latter can be in pixels sometimes). The 3-column layout with footer has the experts reaching for (a) the strict doctype, which will not help 31% of us, (b) JavaScript Routines to figure out which is the longest column so the footer stays unviolated, (c) lots of nesting of float elements to avoid potential problems, and (d) CSS tables, which are just the infamous HTML table tag page layout tables with a prettier name and more acceptability.
2-column-margin-based-page.html is a test page for 2-column margin-based layout. This page layout method seems okay.
3-column-margin-based-page.html is a test page for 3-column margin-based layout. This page layout method seems quite good.
2-column-left-value-based-page.html is a test page for 2-column left-value-based layout. This page layout method seems okay.
3-column-left-value-based-page.html is a test page for 3-column left-value-based layout. This page layout method seems okay.
2-column-padding-based-page.html is a test page for 2-column padding-based layout. This page layout method seems quite good.
3-column-padding-based-page.html is a test page for 3-column padding-based layout. This page layout method seems iffy.
2-column-relative-positioning-based-page.html is a test page for 2-column partial relative-positioning-based layout. This page layout method seems iffy. Its relatively positioned div is for the purpose of conveniently positioning smaller objects inside a larger, containing object.
3-column-relative-positioning-based-page.html is a test page for 3-column partial relative-positioning-based layout. This page layout method seems okay. Its relatively positioned div is for the purpose of conveniently positioning smaller objects inside a larger, containing object.
2-column-useless-relative-positioning-based-page.html is a test page for 2-column relative-positioning-based layout. This page layout method stinks. When you try to make a whole page relatively positioned rather than just positioning a few objects inside one minor div, the IE scroll bar disappears and you can't even get to all the page! There's a fix but it's not exactly a delightful one.
2-column-nested-div-based-page.html is a test page for 2-column nested-div-based layout. This page layout method seems quite good, giving cross-browser compatibility without even breaking a sweat.
3-column-nested-div-based-page.html is a test page for 3-column nested-div-based layout. This page layout method seems quite good, giving cross-browser compatibility without even breaking a sweat.
2-column-all-float-based-page.html is a test page for 2-column all-float-based layout. This page layout method seems quite good, supporting footers better than any other method. This particular float layout has a floating div in the first paragraph in addition to all three columns being floated.
2-column-float-based-page.html is a test page for 2-column partial float-based layout. This page layout method seems okay. It merely floats two objects in two divs, both in the middle column.
3-column-float-based-page.html is a test page for 3-column partial float-based layout. This page layout method seems okay. It merely floats two objects in two divs, both in the middle column. Read about an optimized version of this layout in the section below entitled Dealing with User Text Enlargement for Accessibility.
3-column-all-float-based-page.html is a test page for 3-column all-float-based layout. This page layout method with everything floated, like the 3-column-float-based-page.html method with just two colored divs floated in the center column, seems quite good, supporting footers better than any other methods. The everything-floated layout has a floating div in the first paragraph in addition to all three columns being floated.
The dreaded Netscape float bug: The float property is associated with many bugs, documented and not so documented, but the worst of these, argueably, is the dreaded linked image bug. When you have a great web page put together with the use of float:left or float:right along with some linked images, and you've tested it on IE and it works great, so you're down to the final test phase where you whip over to Netscape and test it, you'll find that the images that are floated malfunction when you try to click them as links! Weirdly enough, the borders of the image seem to be good links, but not the image. The ramifications of this are that you have to do one of three things (after you've finished tearing your hair out):
We found that the CSS method works even without the float property, but the resultant page has to use absolute positioning to simulate float (text horizontal to an image) and the word wrap part of float is gone, so this is weak. On the other hand, the use of HTML works great, and you get text wrapping around an image as well as great-working image links. We like to put the HTML table in a NON-absolutely positioned div (with margin:0 and padding:244px 62px 0 92px) that helps position this table; then put the image inside that table in another table, aligned right and with the <a href> tag before the <img> tag. It's too bad we have to revert back to tables for layout just because Netscape 7 cannot deal with links in floats, but the table workaround works great so what the hell . . .
So here's an idea of how I do it:
<TABLE border="0" width="100%">
<TR>
<TD width="150" rowspan="99"> </TD>
<TD>
<H1 align=center>Flavored G-strings</H1>
<table align="right" border="1" width="200">
<tr>
<td><A HREF="t.html"><img src="h14.jpg" width="200" height="199"></a></td>
</tr>
</td>
</tr>
</table>
blah blah (put 100 to 200 words here—whatever causes paragraph to wrap around image)
</TD>
</TR>
</TABLE>