Is the page too wide?

If you look at the site in a very wide window, it may look a bit too wide and shallow. Is this too much of a good thing?

I'll use one last technique that will keep the page from expanding too much in big windows. I create one more table, with just one cell, and set its width to less than 100% of the window. All of the tables I have made for the page go into this table. I give the page a background color, set the background of the content table to white, and allow the browser to set page margins. The result is a page that still expands on a larger window, but doesn't get too wide--the best of both worlds!

See the finished page

Download a zipped copy of the final page

The table structure I used may seem quite complicated. It's true that the finished page uses a lot of tables, but each table is very simple and has only one or two functions in the overall design. I managed to avoid specifying almost all cell dimensions--the only cells I gave any width attribute at all were the "balloon" cells.

Trying to set the size of table cells in pages that are designed to be flexible can be a puzzle. If you use pixels as your unit, it's difficult to allow for flexibility without leaving some cell dimensions blank. You could try a mix of pixels and percentages. But all browsers won't render tables using hybrid pixel/percentage dimensioning consistently, and if you leave some dimensions blank you are inviting the browser to interpret your page with more flexibility than you may want.

I need the browser to interpret the layout of the page if I want it to work in a range of window sizes. But I want to make sure that I leave it no choice about what parts of the page may be squeezed or stretched to fit the window. So instead of trying to come up with a single table with completely-specified dimensions, and hope it will somehow render correctly in a window size that is different from the one I designed it in, I exploit some simple characteristics of table behavior that I can rely on in any browser.

The demonstration page in this tutorial could be seen as a study in virtual "mechanics." Only two basic "forces" are at work: expansion and resistance. Tables with a width of 100% will expand until they meet the resistance of the edges of the browser window. A 100% width table nested inside another table will expand until it meets the resistance of another element in the table, such as a graphic in an adjoining cell. These two "forces" are all I need to create the page. By thinking about where I wanted expansion (to make the page flexible) and where I should provide resistance (to check that expansion so as to preserve the size of page elements that I wanted to be inflexible), I can design a page that will always find a state of balance in a wide range of window sizes.

Mouse over the three main page areas in this diagram to see diagrams of the "forces" at work in the table structures in the demonstration page: