Analyze the CSS code
The div#outer style is the one that holds the key to this technique. This is the styling for the div that creates the centered box which serves as the container for the rest of the page content--the div that replaces the table. The width: 80% rule sets the width of the div, just as the corresponding attribute of the table tag set the width of the table. Similarly, the background-color:#FFFFFF rule creates a white background for the div like the bgcolor="#FFFFFF" attribute did for the table. The margin-top: 50px and margin-bottom: 50px rules replace the spacer paragraphs with top and bottom margins for the div itself.
The key to this technique is proper centering of the outer div. The challenge is that there is no align="center" attribute for a div like there is for a table. You could use text-align: center for the div's parent element (in this case, the <body> tag) to center the outer div. However, although most browsers will use that alignment for block-level elements, such as divs, in addition to text, it's arguably a misuse of the text-align attribute and leads to complications as you create additional styles to reset normal text alignment back to left.
One way to center a block-level element with CSS is to set margin-left: auto and margin-right: auto. This instructs the browser to automatically calculate equal margins for both sides, thus centering the div. The border: thin solid #000000 rule adds a border around the outer div, just because it's easy to add with CSS but difficult to accomplish with tables. The rest of the CSS code styles the divs for the header, footer, nav, and main content.
The div#header and div#footer styles set margins and padding for those divs. In addition, div#header includes the text-align: center rule to center the header text, and div#footer includes the border-top: thin solid #000000 rule to create a border along the top edge of the div to replace the horizontal rule above the footer in the table-based layout.
The div#nav and div#main styles create the two columns in the middle of the centered box. In the div#nav style, the float: left rule pushes the div to the left side of its parent element (the outer div), and the width: 25% rule sets the div's width to 25 percent of the parent element. With the nav div floated to the left and limited to a set width, it leaves room for the main div to move up to the right of the nav div, thus creating the two-column effect. The div#main style includes the margin-left: 30% rule to keep the main text aligned in a neat column instead of spreading out below the nav column. The main div's left margin is set to a value slightly larger than the width of the nav div.