The images displayed on monitor screens are composed of many small dots of light. These dots are called pixels or picture-elements. Monitor Screen Resolution
The number of pixels displayed by your computer system is known as the screen resolution. The resolution that you have depends on your video board and your monitor. Resolutions that are in common use today are given in the following table. The numbers are pixels.Screen Width | Screen Height |
| 544 (WebTV) | ? |
| 640 | 480 |
| 720 | 480 |
| 800 | 600 |
| 1024 | 768 |
| 1280 | 1024 |
Scrolling
If your page is too wide to fit within the screen resolution being used, your browser automatically inserts horizontal scroll bars into the page. Similarly, vertical scroll bars are inserted for pages that are too long.Vertical scrolling is acceptable in web pages, as long as the amount of scrolling isn't great. However, horizontal scrolling is considered a no-no. This means you should design the width of your pages to fit within the screen resolutions being used. The problem, of course, is that you don't know what resolutions are being used when people visit your site. Thus, you either have to make assumptions about the resolutions, or you have to design your pages to fit the lowest resolution, which is 544 pixels wide. If your pages fit that resolution, they will fit screens having higher resolutions.Design Considerations
Let's assume, for sake of discussion, that you decide to design your pages to display without horizontal scrolling on monitors having 800 x 600 resolution, probably the most common resolution at the present time. There are several factors to consider in doing your design. | Not all monitors display exactly the same number of pixels. Thus, in determining how wide your pages should be, give yourself a safety factor. Instead of planning pages that are 800 pixels wide, plan for 750 pixels. |
| Two objects that may have fixed widths are graphics and tables. Control the size of graphics and tables such that if graphics and tables are side-by-side, their accumulated width is less than 750 pixels. |
| If you use tables, avoid specifying minimum table and/or cell widths. Instead, let the browser adjust the widths of the tables and cells to fit the text and graphics that are inside the cells. |
| If you want a table to completely fill a page, specify a minimum table width of 100% of the window. This will allow the browser to adjust the width of the table to fit the screen resolution being used. |
| Allow the browser to wrap-around text to fit the screen resolution. This wrap-around is the default, unless you artificially constrain the text by placing line breaks and/or paragraph tags in the text. Also, placing text in table columns may constrain the text. |
| Even though you think you are leaving cell-widths unspecified, WYSIWYG editors sometimes sneak in minimum widths in pixels for tables and for cells. Thus, if you have difficulty eliminating horizontal scroll bars, check your table and your cell widths. |
Test Your Pages
Test your web pages for different window widths. Adjust your page-windows to not occupy the full screen. Change the width of the windows by dragging vertical edges of the windows, and check that no horizontal scroll bars appear.
© Copyright 1998, 2011 Allen Leigh