View Full Version : Making website fit to resolution?

Chris P. Bacon
08-17-2006, 01:23 PM
Hey. I'm currently testing my website before I put it on the web, but something bothers me. When I watch it on lower resolutions (800x600, 1024x768, and I use 1152x864), I cant see the entire page, and have to scroll horizontally to see the rest. I wanted a website that filled the whole window, and not just all centered in the middle. Is there any way to make it fit to the resolution?

Try the DynamicDrive main site as example of what I want. No matter what resolution you watch it in, it still fits.

Hope you can help! :)

08-17-2006, 01:34 PM
Replace pixel widths, with percentages.


<div style="width:15%;height:100%">
(This could be a menu)
<div style="width:85%;height:100%">
This could be the main part of your page

Percentages can be very useful

Chris P. Bacon
08-17-2006, 02:35 PM
Thanks for the answer! I got a pretty big bunch of code... Is there any way to convert all sizes from pixels to percent? Or do I have to go through each object, and rescale them with percent?

08-21-2006, 07:02 PM
If you have a text editor that's a little more advanced than notepad, then it probably has a find/replace function. It won't fix everything at once if you have a lot of different width values, but it will help cut down a lot of the repetitiveness.

For example: if you have a value like <td width="500"> then you would have to figure out how big 500 is in percents, let's say it's 20%. Then you would just bring up the find/replace function, put width="500" in the find, and width="20%" in the replace. Then press a replace all button, or something similar, and repeat that step until you have all of your width values changed.

I use TextPad (http://www.textpad.com/), but there's a lot of different text editors out there if you find a different one that you like better.

08-21-2006, 07:06 PM
You can't just find-and-replace absolute values with relative ones. It's a whole different design paradigm. You'll have to seriously rethink the way your site is laid out.