Posted on 05 Jul 2000
by rudy limeback (r937)
Rated 4.17 (Ratings: 15)
- More articles in Site Development
How do you make a web page that looks good no matter how wide the browser window is?Use liquid tables, a technique that lets you "pour" your content into the page so thatit flows to the margins, even if the window is resized.
Wait a sec, doesn't the good old HTML <p> tag allow content to flow? Yes, butthe problem is, you often need parts of the page to remain fixed, such as a navigation bar down one side. The challenge is to have both a fixed and a flexible portion of the page.This is where liquid tables will help you.
Let's start with some definitions:
ice: fixed width
jello: somewhat flexible, often centered
liquid: flexible width
Here are a couple of good explanations of the basic differencesbetween these three techniques:
The problem with an "ice" design, which might use a fixed table width of, say, 600 pixels,is that if the browser window is narrower than 600, you get a horizontal scrollbar, andif the browser window is very much wider than 600, you get a lot of white space.
One type of "jello" design also uses a fixed width table,but centered in the window -- this looks somewhat betterwhen the browser window is substantially wider than the table.Another type uses a table that is a certain percentage of the browser window, say 80%.This allows the table to expand or contract depending on the widthof the browser window, and it minimizes theamount of white space at all widths. But it doesn't allow for a fixed portion, that stays fixed -- for that, you need to use a liquid table.
The general approach to creating a liquid table is this:
give pixel widths to fixed columns
give percentage widths to liquid columns
However, you may still run into problems. Some browserswill disregard the pixel widths and try to "balance"the widths of the columns. Therefore you needsome way to "force" the liquid columns to expandas much as possible.
Let's take a look at some techniques. The following resourcesgive detailed explanations for how to build liquid tables:
Note that one of the resources suggests that you notspecify a percentage width for the table. Does this work? Yup, butit assumes the liquid column has enough content to push the table outto the window margins, otherwise the fixed column tends to expand beyond its specified pixel width. Remember, browsers regard column widths only as a recommendation, usually a minimum.And they will happily override the stated width if necessary, and makethe fixed column either narrower or wider.
Another approach does not usepercentage widths for the liquid columns, but ratheran "absurd" fixed column width such as 2000 pixels.This forces the liquid column to "squeeze"the fixed column, thereby keeping it to its minimum width.This technique assumes a table percentage width, which most browsers(Opera is an exception) will honour -- specifying width=100% for thetable will "override" the absurdly large column width.This technique probably dates back to HTML 3.2 whenpercentages were not allowed on columns -- see the W3CHTML 3.2 table specs.Percentages for columns arevalid in theHTML 4table specs,so it now makes sense togive the liquid column a cell width of 90% or 100%. But be warned thatolder browsers may disregard these percentages if theywere written for HTML 3.2.
In either case you will probably need to ensure thatthe fixed columns do not get squeezed narrower than their minimum pixel widths, and the most reliable way seems to be to usea transparent spacer gif.
Finally, with a truly liquid table, you will still have the problemof long lines of text at very wide window widths.One way to deal with thisis to use a table width of less than 100% -- say 80%.This does not eliminate the problem of long lines of text,it just reduces it.
The bottom line on liquid tables is that you have to test your design.Create a test page like this one --
Test your design in several browsers. Test it at different resolutions.Resize the window. Try to break the design. Bump your fonts up a few notches.Ask for a site critique on your favourite web developer discusion list.
And don't forget to have fun.