Making your web pages fit in any screen resolutions

This page is not organized in the same way as others because we're going to show you how to control page layout and how people make mistakes.

Working with Table:

Making your page fit in any screen resolutions is a must. People will view you page in different kind of screen resolutions. Most people set their screen resolutions at 640x480. That's the reason why you'll see white space on the right of your screen when you're viewing Netscape Search Page with 800x600 resolution or higher. Many commercial sites solve the problem by putting table on the left and set the width at 600 pixel. Doing this, their page will perfectly fit on 640x480 screen. This paragraph is representing what I'm tlaking about.
Here is another choice. Putting your 600 pixels in the middle of the screen. If there are people who have 640x840 viewing your page, it will looks perfectly fit. Anyway, if the group that have 800x600 screen view your page there will be the space on both left and right side. At www.cnet.com they wisely exploit the space on the right by create a background that match precisely in pixels of the table. These are what I'm talking about:

Setting table 100% width of windows, your page will looks differently on different machines. If your page is text based, it would be considered less harmful; but if your page need a fixed composition, don't try this. Tables also give the result of column style.
Long line text could be considered boring.
Why don't you try putting your text in column.
Note: You can also use Netscape 3.0 Extension to make your text column-style looks.

To see how to build a table, please visit the TABLE page on this site.

Horizontal Lines and Graphic Lines:

Some people make this mistake.

Our favourite tools
Web Site Builder Price
1 Coffeecup $49
2 Adobe Homesite $599
3 Site Spinner $38

Web site builders come in different flavors and at different prices. We have collected a list of favorites for you, but of course your personal choice will be dictated by your specific needs.

They work on their 800x600 screen and they put the graphic line that looks good and fit perfectly on their screen. As you can see, the above line is specified the WIDTH as 770. But, if viewing this page on 640x480 screen, visitors have to scroll to the right, which is very inconvenience and considered to be a bad design. You should be careful when using a graphic line. Its width shouldn't exceed 600 pixels.

Using the <HR> tag is safe because it will adjust the size upon screen resolution. The line below shouldn't cause any problem in any screen resolution. Below is the simple one.


There are several ways to play with it. Here are the examples:

Making a square..


Puting in a table:







Specifying the size and color:


ect. -- you've an idea now:)

Working with Frame:

Working with frames, you can control the composition of your web page by specifing the size of frames in pixels.

To see how to create frames, go to our frames tutorial page.

Are you looking for WHMCS Themes for your business website? Zomex offers a complete solution for those looking for complete web hosting solution for your busines!