Go Home

Uncle Jim's Web Designs and Tutorials

Writing for Multiple Resolutions

Site Design Optimization Recommendations

Author: Jim Stiles

Made with CSS
Valid CSS!
Valid HTML 4.01!


Design Optimization (recommended)

The third method is to design your web pages to conform to the user's resolution by shrinking or expanding the surrounding containers.

There are two ways to design using this method - Table design and Table-less design using div tags. For a beginner using tables is the best as there isn't much that can go wrong with the use of tables. For advanced users and design professionals, designing using CSS styles and div tags is a must for optimal results of load time and to follow W3C standards.

For stretch layouts you need to display the width of the table(s) or div(s) in percentages. To fit the whole screen for any resolution, the outer most table(s) or div(s) are given 100% width. If the design can be made to have just one outer table then it can be given a height of 100% to expand and fill the browser space vertically. This can however, become a nightmare when using multiple nested tables.

Here are some live examples of different types of layouts using both methods.

  1. Table Percentages Design.
  2. Two-Column Fluid Design.
  3. Three-Column Float Design.
  4. Auto-centering Content Design.
  5. Resolution Dependant Layout Design.

To design your page(s) where only the content area expands or shrinks, you need to do the following. After the outer most table or div is given the width in percentage all inside cells or div tags should be given fixed widths in pixels except the content cell or div, as in the below example code.


Some pages will inevitably overlap the screen vertically due to design limitations and netscape compatibility issues. Instead of using 100% as the height, the extra space can be hidden using a background color or Z-indexing.

Page One Page Two Page Three Page Four Page Five Page Six Page Seven Page Nine