The Perennial Screen Width Issue

[rogerd]

I am working with an e-commerce site that has used flexible table widths on some pages and fixed-width pages on a few "highly designed" pages. I took a look at some award winning (Catalog Age) e-commerce sites, mostly fairly major retailers in a variety of categories. I found a really mixed bag of screen widths. One or two were 640 (or a few pixels less), some were a fixed 800, and a few had right and left fixed width columns with one or two expandable columns in the middle.

By far the most attractive and professional looking were the fixed width pages. Some of the expandable ones weren't bad, but design compromises are inevitable when you give the browser a lot of latititude. (The ideal from a design standpoint would be one big image map or sliced image table - leave nothing to chance! Not real effective for SEO, though.)

I'm inclined to go with the 800 pixel width that seems to be most popular with major sites. Any feedback?

[tedster]

This might be a good place to mention one techinque for getting a "fluid" layout to work cross-browser using layout tables.

The challenge is that Netscape and Explorer allocate column widths differently. Assume you create a two column table with width=100%, and a left hand column with width=120. You might expect that the left column will be static 120 pixels over all resolutions and the right column will fill the remaining space. NOT ALWAYS SO!

Many versions of Netscape 4.x will stretch that first column wider than 120 pixels, especially at high screen resolutions. If you try to force the issue by declaring the right column to be width=100% (that is, all the allowable remaining space) Netscape will collapse the left column to a very slim minimum that is often less than 120 pixels.

The fix is to declare the right hand column as width=100%, but also include a transparent spacer gif in the left column with a width of 120 pixels. This keeps the browser from collapsing the left column any smaller than 120, and the right hand column at 100% keeps the left column from growing any wider than 120.

The same principle can be extended to 3 or more column layouts.