Web page design is an art - one that causes many people trouble due to the visitor's monitor resolution and their browser. It is almost impossible to make a web page appear the same in the major browsers, IE and Netscape, but when you throw in resolution, most people will throw up their hands and give up.
There is, however, a way, other than tables, to design a web page so it fits almost all monitor resolutions. By almost all I mean 800X600 and 1024X768 pixels. Anyone that uses a higher resolution, e.g. 1280X1024 pixels must have extremely sharp eyes to read the monitor. Very few people today will be using the old 640X480 pixels resolution.
A popular method of designing web pages is to use a newspaper format, i.e. columns. In the past this has been done using tables which may have one or more rows and two or more columns. The widths of each column, or cell, <td>, is set to a percent. This method works very well but with the advent of CSS, the CSS POSITIONING! has taken over and many web pages have switched over to use it.
A basic introduction to CSS Positioning can be found here. The key is, like tables, to use a percentage, % to specify where things will be placed and what is the width it will occupy on the screen.
The basic CSS Position tag for designing column web page is:
<div style="position:type;left:l-value;top:t-value;width:w-value">
where:
When designing a web page to fit various resolution it is best to use all absolute and percentages. This means for the left, top, and width attributes.
If you have a monitor that you can set the resolution, go to my introduction page and alternate between 800X600 and 1024X768. Note how the page easily fits either resolution. If you don't choose to re-set the resolution or your monitor can not be easily re-set, what the page looks like in both resolutions is shown below.
| 800 X 600 Pixels
| 1024 X 768 Pixels
|
The introduction page has two columns using two <div> tags:
left column: <div style="position:absolute; left:7%; width:70%">
right column: <div style="position:absolute; left:70%; width:30%">
Each of the above <div> surrounds the text and tables in each column by having a </div> at the end of the column. If you will be using tables within a column be sure that you don't set the table width. That way it will fill the entire column. If you do set a table's width be sure to calculate the minimum size of the column so you can set the width to this size or less.
You can do the same with your columnar pages. You may have to experiment with the left and width percentages to get the column widths "right".
For higher resolution you probably should allow more space between columns when the pages is seen in lower resolutions.