View Full Version : Can you auto size for multiple screen resolutions?
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.
12-05-2003, 01:05 PM
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
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!
12-05-2003, 02:33 PM
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 Design for the Web
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
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.