The problem
A lot of web masters don't believe that one and the same html code can be used to make a use that looks good in different resolutions and window sizes. Most sites these days are made to measure for a resolution of 800 on 600. As a result, those sites only takes up a part of the available screen space in resolutions higher than 800 on 600. The site of Flemish newspaper De Standaard is a good illustration. Some sites try to hide the empty space by using a graphical element, like Flemish national radio station Studio Brussel does. Another often-used camouflage tactic is elongating the top border of the site, to create the illusion that the site does use the entire screen, like De Financieel Economische Tijd does. Horizontally spreading text isn't the best idea either. Research has shown that users find it harder to read text in very wide columns.

The solution
The principle. A technique that is used more and more often for creating a liquid layout is providing a fixed space on the left and the right of the page and leaving the middle - content - part of the page flexible. Usually, the fixed space on the left is used for navigation while the fixed space on the right is reserved for commercial content like buttons or text ads. To avoid the problem of all too wide text columns, most sites divide the content part of the page in two columns. Another way to avoid too wide text columns is a clever use of graphic elements. When used sparingly, they can help to create a visually attractive page layout, like on the cd review pages of UptoMusic.

The main table. For the best result, start with one big table in which the border, cell spacing and cell padding equal 0. If you want your site to be surrounded by a small border of white space, it is best to leave the body-tag of the page untouched and to set the width of the table to 100%. If you don't want any white space, assign the next attributes to the body-tag: leftmargin="0" topmargin="0" marginwidth="0" marginheight="0". If you want your page to stick to the edge of the browser, choose a width of 100%. If you want a little breathing space, choose a width of 98%. If you choose a width of 98% don't forget to centre the entire table on the page via the following code: <div align="center"><center>tabelcode</center></div align="center">.

Building blocks. Within the table you've just created you now create a new table with a width of 100% breed and a border, cell spacing and cell padding value of 0. You then divide this table into three columns and you assign a fixed width to the first and third column. You can of course adapt the exact width of these columns to the length of your navigation items or the size of the buttons you want to use but we recommend a value between 100 and 150. Most users prefer a symmetric look and we would recommend you to use the same width for the two fixed columns. Don't forget to vertically align all three columns at the top: valign="top".

Content
A system of includes is the best way to provide the left and right column with content. That way, the entire navigation of your site is contained in one single file, which also makes it a lot easier to make changes. How you use the middle part of the page is of course completely up to you. We recommend you use a table with cell padding and cell spacing set to 2. That way you prevent text from standing too close to the edge of the table. To avoid text that is spread too wide, divide the table into two columns, like on the homepage of UptoMusic.

Definition
If you want to add extra definition to the edges of your navigation, content part and right column, like on UptoMusic, you can add a background colour to the main table (in this case, black) and by assigning a certain value (in this case, 2) to the cell spacing and cell padding of the second table.

Header and footer
In most cases the three columns described above will not suffice to create a suitable layout. Most sites have a zone at the top of every page that contains their logo and possibly a tool bar and a search box. At the bottom of every page there's usually a zone with a disclaimer and copyright notice. You can include these zones in your layout by putting new tables above and below the main table that have the same width and attributes as the main table. That way, the tables are aligned in the same way as the main table and you are free to fill in these zones any way you want to. UptoMusic is built this way.