Absolute Values vs Percentages

The appearance of your web page design may differ depending on the resolution of the screen the viewer is using. Unlike television sets that have a fixed number of horizontal lines to make up the picture (625 lines for UK colour sets) computer monitors are designed to display at different resolutions.

For example my monitor can display at the following resolutions (measured in pixels):

  • 1280 x 1024
  • 1152 x 864
  • 1024 x 768 (my default setting)
  • 800 x 600
  • 720 x 576
  • 640 x 480

Most modern PC monitors will display at a resolution of at least 800 x 600 pixels.

Browser window with web page that fits

Using Percentages

So on a monitor set at 800x600, an object (for example a table) that has its width set to 90% will be 90% of 800 pixels wide (720 pixels), but on a monitor set at 1024 x 768 it would be 90% of 1024 pixels wide (921 pixels). If you resize the browser window that will also make the object change width too.

This can sometimes spoil the layout of some pages or just make them look untidy, but the full width of the page will always be visible.

Browser window with horizontal scroll bars

Using Absolute Values

However if you specify an absolute value for the width of the object, it will remain that size on any monitor. This does mean that if you specify a width that is wider than the monitor is set to display the browser window will have horizontal scroll bars. People expect to scroll down a page, but dislike having to scroll sideways as well. As most monitors are capable of displaying at least 800 pixels wide you can avoid this by making any fixed width table no wider than 800 pixels.