Ars Longa, Vita Brevis

Кросс-браузерный семантически корректный резиновый макет с тремя колонками (сайдбары справа)

Очередной раз попав не туда, куда надо из Google, я натолкнулся на статью "Трехколоночный макет на CSS с одинаковой высотой колонок". Да, трехколоночные макеты (да еще и резиновые!) очень популярны, я смотрю :-) Но, несмотря на популярность таких макетов, многие верстальщики почему-то не хотят учиться и городят целый огород на div'ах.

В указанной статье приводится следующая разметка (я убрал пустые строки и изменил форматирование):

[-]
View Code HTML
<body>
    <div id="wrapper">
        <div id="header"></div>

        <div id="container">
            <div id="sub-container">
                <div id="wrpr">
                    <div id="content">
                        <div id="text"></div>
                    </div>
                    <div id="left"></div>
                </div>
            </div>
            <div id="right"></div>
        </div>

        <div id="footer"></div>
    </div>
</body>

Что мы видим: пример, как верстать не надо. Может быть, сказано слишком резко, но на мой взгляд, суп из div'ов (с глубиной вложенности 6) ничем не лучше табличной вёрстки (табличная вёрстка будет даже компактнее). Кроме того, большая часть этого супа не несёт семантической нагрузки. И вообще, при верстке нужно руководствоваться принципом KISS, но это моё сугубо личное мнение.

Попробуем переделать.
Начнём с разметки:

[-]
View Code HTML
<body>
    <div id="header"></div>

    <div id="container">
        <div id="content" class="column"></div>
        <div id="col1" class="column"></div>
        <div id="col2" class="column"></div>
    </div>

    <div id="footer"></div>
</body>

Как я уже отмечал в предыдущих статьях, названиям классов и атрибутам id нужно давать семантически значимые имена, но в качестве тестового примера пойдут и такие.

Простая разметка — простые стили:

[-]
View Code CSS
html, body {
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
}

html { /* Для IE6 и IE7 */
    overflow: auto;
}

body {
    min-width: 50em; /* #container.paddingRight + #col1.offsetWidth + #col2.offsetWidth */
}

#container {
    overflow: hidden;
    padding-right: 25em; /* #col1.offsetWidth + #col2.offsetWidth */
    position: relative;
}

/*\*/
* html #container {
    height: 1%;
}
/**/

.column {
    position: relative;
    float</