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!!


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

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?

+1  A: 

Unless you want to do all size measurements in percentages, I don't think you can. And even then, you'll have a problem if someone uses a resolution in a different aspect ratio or a really low resolution, because in the first case your page will be stretched or squished and in the second you could have layout issues.

Exactly. It's nigh impossible to ensure that a website is suitable for "_all_ screen resolutions"; you should focus on making your site optimal for the most popular resolutions (in your target demographic), and just usable in as wide a range of resolutions as possible.
Lèse majesté
+2  A: 

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.

+1 [SimpleBits](http://simplebits.com/) was just redesigned using media queries. If you want to see the potential of this method, go there on a 24" monitor, start at full screen, and drag it to 100px wide. It makes me drool!
And here is a great article on [Media Queries ](http://www.alistapart.com/articles/responsive-web-design/) at A List Apart.
+1  A: 

Your CSS for the body tag look OK. But if e.g. all of the DIVs in your body have a fixed size, they will never fill out the whole width. Can you post an example of your page?

+3  A: 

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) {

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

body {width:100%;}
R. Hill

People tend to make websites 960px wide.

It is easy to split into even sized columns, as it is divisible by 3, 4, 5, 6, 8, 10, 12, 15, and 16, plus it fits nicely into the smallest (worthwhile) resolution of 1024px.

You can of course use fluid layouts, or various methods of detecting screen resolution, but if you are using a lot of imagery, it makes it a pita.


I would recommend you use a CSS framework. They build the foundations of your design so you don't have to worry about things like this.

My personal favourite is Blueprint as they take care of things such as typography and form styling not only the grid layout, which is what you're after.

960gs is another popular one which works in a very similar way to Blueprint. They also have a few tools to help you with customizing your development and is not as restricting as Blueprint.

They are the two I've used before, but I'm sure there are loads more.

Ben Shelock

Make layout stylesheets for the most common resolutions... let's say 800x600, 1024x767 and 1280x1024. Then load them with:

<link rel='stylesheet' media='screen and (min-width: 778px)' href='css800width.css' />

You can read more at CSS-Tricks.

Gert G