By nature, HTML text fills up the entire width of the browser window. Take this paragraph as an example. If you open your browser window wider, the text will flow to fill the newly available horizontal space. Likewise, if you decrease the width of your browser window, the text will re-flow into the narrower column.
With the rise of the "designed" page, though, more often than not the text has been placed into a fixed-width table with fixed-width columns. There are at times some advantages to this, both in terms of aesthetics and readability. However, the user has also been deprived of a previously-available level of control. Some people like to open their browser windows wider to get more text on the screen at once.
Part of the reason for fixed-width pages is intention, but another part of it is lack of knowledge. Few designers know how to create designs that will work on flexible pages, and not all programmers know the tricks to making a page flexible while holding the artwork together. Here we'll try to address that lack of knowledge with some technical details and examples.
The dominant method of HTML page layout these days is with the use of tables, so we'll center our discussion around that method. In the future it may be possible to use layers and CSS styles for the same purpose, but for now, the least-common-denominator does not allow us to do that.
Prerequisites
To understand this tutorial, you should already have a basic knowledge of HTML table tags; you should understand how tables can be used for page layout and how slicing works; and you should understand how one-pixel transparent GIFs (also called shim or spacer images) are used to fill empty table cells.