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:
<script type='text/css'>
body {width:100%;}
</script>
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?
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.
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.
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?
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%;}
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.
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.