A Solution For Making Sure your webpage looks
okay for Different Resolutions On User Monitors
 



 


Common manifestation of the problem: Page shifted to the left on higher resolution monitors, leaving a large white space to the right side.

If you are perplexed by how to make your website look okay when you have people viewing it with different resolutions, here's a neat solution.

Design your site with fixed tables (or css) and make sure the table width is about 760, which will ensure that the webpage will fit well on the most commonly used 800x600 resolution.

The same page when seen with a monitor with 1024x768 resolution will be pushed to the left, and will leave third of the screen white, or your background color, on the right site.

This will get worse for higher resolution monitors: 1152 x 870 will leave almost half of your screen white or in background color.

Once you have created your webpage, the structure will be something like:

<body>


Webpage body HTML


</body>

Solution:

The trick is to center your webpage for the higher resolutions, so the page is not pushed to the left, but appears in the center for all screens.


The way to accomplish is to insert a bounding table around the webpage body html. Now align this table to center, which will make sure that the page will be centered, and the white spaces will be distributed evenly on both sides.

<body>

<table width="100%"><tr><td align="center">
Webpage body HTML

</td></tr>
</table>

</body>

Insert the tags in the red on any webpage and you have a centered page for all monitor resolutions!

The beauty of this solution that it works well for existing pages, and doesn't need anything much except inserting this bounding table. You can also adjust the background color of this table to suit your website design.

 

     
Press Ctrl+D to
Bookmark this site.

  Copyright 2006