What is the best approach to make 3 column fixed width cross browser compatible, accessible, semantically correct layout?

Question

What is the best approach to make 3 column fixed width cross browser compatible, accessible, semantically correct layout ?

<div id="wrapper">
        <div id="header">
            This is the Header
        </div>
        <div id="top-nav">
            Top Navigation
        </div>
        <div id="leftcolumn">
            Left Column
        </div>
        <div id="content">
            content column
        </div>
        <div id="rightcolumn">
            Right Column
        </div>
        <div id="footer">
            This is the Footer
        </div>
    </div>




#wrapper {width:970px;margin:0 auto }
 #header {height:100px  }
 #top-nav {height:30px}
 #leftcolumn {  }
 #content {  }
 #rightcolumn {  }
 #footer {height:100px}

With this XHTML code what css should be written to make this 3 col layout.

• cross browser compatible including IE6 (without CSS hack or extra conditional css for IE)
• Width in Px
• Centered
• Font-sizing in em
• Number of column can be extended or removed 1-4,5 etc
• SEO Enabled

Answer 1

Um, this is pretty darn easy with floats and faux columns.

Why do you have so many containers around the columns? You only need one. To clear the floats, do

#container {
    width:960px; /* or 100%, or whatever. It needs to be set for it to work in IE tho */
    overflow:auto; /* hidden works too */
    background:url(./img/faux-columns.gif) repeat-y; /* google faux columns for A List Apart article */
}

and for the columns themselves

#col1 { width:520px; float:left; margin-right:20px; }
#col2 { width:200px; float:left; margin-right:20px; }
#col3 { width:200px; float:left; }