Layout
Think about the stuff on your page as solid boxes. The main text is one big box. A vertical stack of buttons is a small box. A simple page might look like this:
But what if the user's browser window is wider than that? Then your design would look a bit strange, The big emprty space on the right seems like a mistake (see page).
To account for different screen resolutions, we often center the entire layout horizontally. The equal space on both left and right appears to be deliberate and planned (see page).
That's one solution to the inescapable truth of Web design -- you can't control the user's screen. But you can control your layout.
Here's another common scenario: A page may be filled with elements such as a header, a sidebar story, and navigation, in addition to the main text. Filled, that is, at a certain resolution, such as 800 x 600 or 1024 x 768:
But at a higher resolution, you'll see the same empty-space problem. This happens when each of the boxes has a fixed width (see page).
Instead of centering the design, you can make it stretch to fill the space. This is a liquid design. You could make only the main text and the top header "stretchy" (see page) ...
... or you could make all of the boxes stretch, or scale (see page).
You can have fixed-width elements inside your stretchy elements (see page).
With CSS, you can control the position of every element on your pages (see page).
Some Useful Tutorials and Explanations
- Floatutorial
- Faux Columns
- Centering: Auto-width Margins
- In Search of the Holy Grail (provides simple CSS for a good three-column layout)
> See also the CSS page (on this site)