How to make sure a website is suitable for all screen resolutions?

Question

Just spent several hours writing up for a new site... looks great in my resolution, 1366x768... However, even going down to 1024x768 means that not everything fits inside the screen width!!

Tried:

<style type='text/css'>
    body {width:100%;}
</style>

This does have some effect on my resolution but no effect on smaller resolutions... How can I make sure my webpage will fit 100% in all screen resolutions?

Answer 1

I use CSS @media directive, unfortunately, not supported by IE8-. Compliant CSS3 allow you to style differently according to the width of the viewport:

<style type="text/css">
@media screen and (min-width:1px) and (max-width:1365px) {
    ...
}
@media screen and (min-width:1366px) {
    ...
}
</style>

By the way, you have an error in your CSS, you forgot to specify the unit:

body {width:100%;}

Answer 2

One thing you might be interested in are CSS Media Queries. They aren't supported in every browser, IE for example only supports it as of the version 9 preview, but they can help with resizing windows as well as smaller resolutions, because you can apply different CSS rules to each screen size.

Apart from that, make sure that your layout isn't "rigid", i.e. don't treat divs like tables. Make their width based on a percentage of the parent, or use floating to get them to line up correctly. It is acceptable to have a "minimum width" of your site -- usually 800 or 1024 -- accepting that users on ancient resolutions like 640x480 will just have to scroll.

You will likely need to go back to the drawing board with your CSS and design it to readjust itself, and/or have a minimum width.