Some notes on how to create an HTML interface that works with all kinds of screen sizes popular today, no matter if it's workstation or portable. This solution relies on pure HTML/CSS, so IE6/7/whatever are out.

The layout has to be elastic, this is essential.

Always use em units, the height of the current element's font. There can be some exceptions to this rule, for example, position of background images is defined in pixels, as they are bitmaps. Every other width, height, or font-size attribute should use em values. Always have a good reason if you have to use a different unit.

If you declare the font-size attribute, try to use relative values smaller or larger. When the font size changes, be careful with the margin and padding values of the current element, its font size just changed.

Your scaffold are nested <div> elements.

Create your north, west, center layout with <div> container elements and use static position (the default, what a great name), avoid absolute and fixed. Then float the nested containers in their parent containers either left or right. Use margin: 0 auto; to center things horizontally within their parent container. Don't hesitate switching some inline elements to display: block if necessary, such as centered <a> and <img> elements.

Dynamically change the layout with CSS media queries.

Use the @media CSS query to detect the pixel width of your client, and group the styles accordingly. Recommended sizes and order of overrides are:

• @media screen {...} is the default collection of styles. Use whatever font size values (remember, this is now your master switch for resizing everything!) look good on your workstation. Don't waste space, many screens today have a width of more than 2000 pixel. Consider that much smaller devices such as a 10" tablet in landscape mode should display this variant, too.
• @media screen and (max-width: 1024px) {...} catches everything that is portable but maybe not in your pocket. Large phones in landscape mode or small/regular tablets. This would be an iPad (2) in portrait mode. On these screens, space is at a premium, so remove fat by overriding the margin and padding everywhere. Use smaller font sizes to make all containers more compact. If you did it right, this should be be changing font-size values in very few places. Increase the size of navigation elements if you think you have more touchscreen than netbook users.
• @media screen and (max-width: 480px) {...} is a handheld device such as a phone in portrait mode. You have no space to waste at all, so no more "floating" of containers in containers. There is not enough room for "left" and "right", you squish the layout so all content is in one narrow but long column. Just set float: none; on all containers that were previously positioned left or right. Remember that fingers on these touchscreens are huge, so enlarge the navigation item's font sizes significantly. Don't forget your forms. Turn your background dark and foreground bright to reduce power consumption on OLED screens.

An example of such a layout is this here website, so just grab your browser window and resize it. The layout will follow and you can see how it would look like on a tablet or phone.