How to make a webpage that will fit to all screen resolution

Question

I am attempting to create a webpage formatted to fit the width of all screen sizes (or resolutions).

In other words, I want to format the width of my page in such a way that anyone who views it will not have to use a horizontal scroll bar at the bottom of the screen.

So far, I have found no help on this topic.

Answer 1

Well, there are several approaches. One would be to use ems/percentages for your widths thus achieving a fluid design that adopts to your users screen resolution. The other is to have several css sheets for different widths and call them based upon a screen resolution check from a simple js code.

The first one is a bit harder, but yields good stable results. On the other hand, (as a designer) it kinda restricts your creativity a bit.

It seems to me like the latter is more widely used. Nowadays, 3 different stylesheets will suffice for most devices around the world. One around 900px will cover somewhat older screens, one around 1160px will handle the larger and more modern screens, and one for mobile devices(sorry, no idea on approximate width) should do the trick.

Answer 2

The only way to achieve a scalable web page is by avoiding fixed sizes. Of course that presents problems with text since it will attempt to wrap it on the following lines, so you must either specify a minimum width or combine it with a pre tag with overflow: hidden so that it won't affect your page layout at the expense of simply not being able to read the text.

Fortunately, you can easily test your page by simply shrinking your web browser to smaller resolutions and seeing how it pans out.

Answer 3

The way you're asking this question, not only will the width of the body have to be 100%, but the width of its the child elements will also have to be in percentages.