This is the start of my design rational list that will become a compilation of some of the most important CSS techniques that I think should be known to create a consistent layout.

Set Base Font Size
body { font-size: 62.5%; }
Setting the body font-size to 62.5% will set a pages font size to 10 pixels. That way, 1em is equal to 10 pixels.

Have Consistant Margins
Include a reset stylesheet to reduce browser inconsistencies in the beginning of the CSS. A good source is meyers.com

Or simply removing the margin and padding from every element will allow the margins to be set consistently.
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

Set a Float to Clear a Float
A way to clear the float, is to insert a clearing element — use an empty div set to clear: both.

The code below will not float elements to the left or the right side of an image:
img
{
float:left;
clear:both;
}

Faux Columns to Balance Columns
A layout has Two or three columns next to each other, and one or two of the  columns have different background colors, and one column has white. Since the columns will almost never have the same amount of content in them, they will never line up. An inventive way to fake this, is to have a 1px tall background image of the color for that column repeated vertically in the containing element of the column with color. Now the bottoms will always line-up.

Font Stacks
Font stacks are important to providing fonts that look and fit well with a sites design. Font stacks are used as fallback mechanisms when an operating system does not have the preferred font installed.

An example of a good font stack is shown below. The fonts in the font stack are fairly popular, most likely installed in most operating systems, also do not vary greatly with the aspect ratio, and are quite similar in style.

Font stack example: font-family: Helvetica, Verdana, Arial, sans-serif;