Как лучше всего сделать кросс-браузер с 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 столбцами.

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