Каков наилучший подход, чтобы сделать трех столбцов фиксированной ширины кросс-браузера совместимым, доступным, семантически корректным макетом?

Question

Каков наилучший подход для обеспечения совместимости трех столбцов с фиксированной шириной кросс-браузера, доступного, семантически корректного макета?

<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-х столбцового макета.

• кросс-браузер совместимый включая IE6 (без CSS хак или дополнительного условного CSS для IE)
• Ширина в РХ
• Centered
• Font-проклейки в эм
• Количество столбца может быть расширенный или удален 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 + его плагин для компоновки. Держите голову полностью.