CSS & Boxes
I mentioned in the theory section about the CSS Box Model, the model by which the browser stuffs content into boxes and then puts those boxes on the page. Now it's time to get into some of the code that makes it all happen.
Box Sizes
Let's start with the basic kind of box, a "block object." A block object is any object that has the CSS property "display: block;" Certain elements in XHTML display as block objects by default (H1-H6, P, UL, OL, LI, BLOCKQUOTE, DIV, etc ... ).
There are three scenarios that the browser uses to determine the box size.
Specific Width
When you set a specific width or height for a box using CSS, you're setting the width or height of the content area of that box. Any padding, border, and margin are added on top of that width or height.
For example, the following CSS and XHTML:
css:
#ExampleBox {
width: 100px;
padding: 5px;
border: 1px solid #000;
margin: 5px;
}
xhtml:
<div id="ExampleBox"></div>
Will produce a box that takes up 122px. The math is simple: content area (100px) + padding on both sides (2 x 5px) + border on both sides (2 x 1px) + margin on both sides (2 x 5px) = 122px.
If the box is floated left or right, it will be sized according to the rules above and the text on the page will flow around it. If the box is not floated, content will continue below the box as if it had taken up the entire width.
width: auto; float: none;
A box with automatic width that's not floated left or right will be sized to fit the width of its parent container automatically. This is the default for most default block objects (like headings and paragraphs).
width: auto; float: [left|right];
If you float a box without setting a width, the box will be sized automatically to fit the content in the content area. Text will flow around it naturally. (I've prevented that from happening here intentionally.) This can be a dangerous option if you're filling the box with dynamic content. Because the nature of the content is unpredictable, the size of the box is also unpredictable and can lead to inconsistent rendering across platforms.
A Quick Note On Margins
I know I've noted this before, but it bears repeating. Margins are not cumulative, they bond together. If you have two boxes next to each other with 5px margin, they will be 5px apart, not 10px. When objects are placed next to each other, they are placed at the minimum distance that satisfies both object's margins.
Two Column Layout
One of the first things that anybody learning how to use CSS tries is the basic two column layout. It actually turns out to be relatively simple. Here's an example:
css:
#Container {
width: 640px;
border: 1px solid #F00;
}
#RightColumn {
width: 200px;
border: 1px solid #0F0;
float: right;
}
#LeftColumn {
width: 436px;
border: 1px solid #00F;
}
xhtml:
<div id="Container">
<div id="RightColumn">
Right Column
</div>
<div id="LeftColumn">
Left Column
</div>
</div>
And the results look like this:
Once you've got the columns positioned, you've done half the work. After that, break out the Web Developer add-on in Firefox and start styling the two columns to appear the way you like.