The Box Model
The box model has replaced the table for formatting properly formatted web pages. Boxes give you considerably more flexibility in creating shapes and areas, but the flexibility does come with a price tag: complexity.
The hardest concept to get straight with the box model is that margins, borders and padding all go outside the defined box. Where this causes problems is if you have a left box that is 25% and a right box that is 75% and either of them has a margin, border or padding, the two boxes will not sit side-by-side. They will stack because when you add in the width of the margin, border or padding the total is more than 100%.
In the diagram, the Content Area is the smaller, inner rectangle. Potentially, there is a lot of room outside the box. The area immediately surrounding the Content Area is the Padding. The padding will have the same background color as your text and if you put other elements with padding next to it, the padding is not additive. Only the larger value will be used.
The border can be any color you define, or it will assume the color of the text in the box in the absense of a declaration. Borders can be any thickness and color (even two-toned) and can be dashed, dotted, solid, double, groove, ridge, inset or outset. Setting it to none or hidden will keep it from displaying.
Margins are transparent and display whatever is underneath. Margins can be negative, which is the trick I used on the Home page in this demonstration to get the Pull-Quote box to lose its separation from the menu.
To get started, I strongly recommend that you head out to The Noodle Incident where you can pick the box you want and it will generate the CSS for you. Play around with their boxes for a while until you figure out what is happening. Much easier than listening to me or anyone else tell you about floating, relative, absolute, display and whatever boxes. I was about ready to junk this whole thing until I ran into The Noodle Incident.
If you want to see some stunning examples of CSS in action, MeyerWeb.com has a couple of thrillers. And to see what can be done to a site by changing only the CSS, visit the Zen Garden where about a dozen web designers created their own interpretation of a basic html page -- where NONE of the html is allowed to be changed. The only difference amongst the pages is the CSS. Imagine how easily you can perform a major facelift to your entire web site once you see what all you can change with just CSS.