Can you auto size for multiple screen resolutions?

[Neo]

Hello Web Pros!

I've been on sites that perfectly fit my browser's screen in both 800x600 and 1024x768 resolutions and have wondered to myself: "Self, How did they do that?" Someone recently told me that if you build everything inside one master table sized at 100%, the browser will automatically resize to fit the screen no matter what your screen resolution, eliminating the need to scroll horizontally. I tried it and it didn't work for me. How is it done? One site that does this is http://www.marketingpower.com
Thanks in advance for your input.

[Narasinha]

Originally Posted by Neo

HSomeone recently told me that if you build everything inside one master table sized at 100%, the browser will automatically resize to fit the screen no matter what your screen resolution, eliminating the need to scroll horizontally. I tried it and it didn't work for me. How is it done? One site that does this is http://www.marketingpower.com

Hi Neo,
Yes, setting up a table (as the site you mentioned has done) or a <DIV> (using CSS) to use a width of 100% will resize that container to fit to the browser window. Keep in mind that in practice you can put something (a graphic, for instance) inside that container that is wider than the browser. This forces the table or div to expand to fit what is inside of it. This really show up when, for instance, you have a table with three cells across, and the content of those cells end up wider than 1024 pixels. Scrolling left-to-right is the only way the browser can fit it onto most screens. Sometimes table cells (or <DIV>s) are given fixed widths in pixels. This can allow for more precise positioning of items, but often results in a page looking too thin or too wide on some screens. In using CSS you can specify the dimensions of an item using pixels, percentages, ems, etc. Percentages, and variable units such as ems, will allow page elements to resize with the page, or the selected text size.

That Marketing Power web site sure looks a lot different in Opera than in Internet Explorer!

Narasinha

[paulhiles]

Hi Neo,

As Narasinha has confirmed, using flexible tables or div layers is the simplest way to have your pages looking good in 800x600, 1024x768 or indeed whatever size a visitor may choose. I know there are various JavaScripts out there that will attempt to adjust the page layout 'on the fly', but these are often quite unpredictable in their behaviour, and often have compatibility issues.

There are a number of articles which explain the concept of 'liquid design' much further, and I've included a couple of useful links below:

Liquid Tables
http://evolt.org/article/ds/20/2321/

Liquid Design for the Web
http://algonquinstudios.com/article_177.html

I've also created several sites myself using a similar approach to layout.. two prime examples being www.keybridge.com and www.softfurnishing.co.uk

Hope that's of some help

Paul

[Neo]

Thanks guys! I really appreciate your input. paulhiles, I haven't yet got a chance to check out the resources you passed on but I will as soon as I get a chance. Thanks again.