使3列固定宽度跨浏览器兼容，可访问，语义正确的布局的最佳方法是什么？

Question

使3列固定宽度跨浏览器兼容，可访问，语义正确的布局的最佳方法是什么？

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

使用这个XHTML代码应该编写什么css来制作这个3 col布局。

• 跨浏览器兼容包括 IE6（没有CSS黑客或额外的 IE的条件css）
• Px中的宽度
• 居中
• em中的字体大小
• 列数可以扩展或 删除1-4,5等
• SEO启用

Answer 1

嗯，漂浮物和人造柱很容易。

为什么列周围有这么多容器？你只需要一个。要清除浮子，请执行

#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 */
}

以及列本身

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

Answer 2

使用jQuery +其布局插件。保持你的头发。