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

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
• Center开发者_开发问答ed
• Font-sizing in em
• Number of column can be extended or removed 1-4,5 etc
• SEO Enabled

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; }

Use jQuery + its layout plug-in. Keep your full head of hair.