Space efficient web page layout is an often desired, but rarely achieved design goal. The problem comes from one of the main side effects of the web technology - you never know how big is the screen of the viewer. Some "solutions" you might encounter are
You can find a lot of good examples for all of the above at the csszengarden.
So why am I writing this? Because I have to put black on white a few of the ideas I have, which I might implement, or somebody else might jump on board and do that before me. Or it might already be out there in the wild and I just don't know it.
The end goal is using the browser real estate efficiently, so that there is no unnessesary unused space, while keeping the design tidy, meaning preserving the proportions between the different design elements.
One technique to achieve it would be using floats. A problem with that is that we can't be sure of the floats height, especially in dynamic, as in server generated/serverd content. We need to allow for differences. Floats are of a value with static or rarely changed content, where we can afford paying attention to restyling. It is an approach hard or impossible to maintain.
Another approach would be to use javascript altered layouts. What do I mean by that? Consider the scenario: a website, a good well designed xhtml structure, css based layout. Everything displays well. We want it to display better, or more efficiently. Our only feasible chance to investigate the different client sizes is client-side, javascript.
We should be able to build a set of design, or restyling rules, which onload are applied to optimise the client layout according to the design goals.
The main yardsticks which should be met, paramount in a modern context (IMHO):
