Same-height columns

by Vladimir

HTML

<div id="header"> шапка </div>

        <div id="columns">
            <div id="left"><h2>левая колонка</h2>
                <p><b>Заметка:</b> в CSS2 не поддерживается свойство box-sizing, поэтому для старых браузеров, в случае необходимости указать размеры ячеек, делать это нужно за вычетом значений border — и padding-отступов.</p></div>
            <div id="center">
                <h2>Центральная колонка</h2>
                <p>Здесь мы указали браузеру, что требуем обёрточный контейнер показывать как блочную таблицу на всю ширину родителя, причём для исключения непредвиденных искажений размеры таблицы просим рассматривать по её границам (плюс неучитываемые margin-отступы с боков погашаем намеренно, иначе размер исказится). А вложенные в эту обёртку первородные DIV-ы призываем показывать как ячейки таблицы с подстраиваемой шириной (подстройку высоты браузер делает сам) и таким же рассмотрением размеров ячеек по их границам, а не по границам содержащегося в них контента.</p>
                <p>Теперь если бы мы, например, захотели боковые колонки сделать фиксированного размера, то в стилях просто нужно прописать желаемые ограничительные размеры колонок. Допустим, желаем левую колонку — 300 пикселей, а правую — 200 пикселей и вдобавок с отсечением невольно выступивших за край частей её содержимого.</p>
                
            </div>
            <div id="right"><h2>правая колонка</h2>
                <p><b>Заметка:</b> такое указание родства объектов, как использовано в продемонстрированном примере, необходимо для гарантии срабатывания стилевых правил лишь на конкретные колонки, принадлежащие непосредственно обёртке. А добавочное причисление случая с тегом noindex служит цели отработать ситуацию, когда SEO-шник сайта решил отдельную колонку закрыть от индексирования поисковыми серверами (нынче в строении интернет магазинов это бывает принципиальной деталью).</p></div>
        </div>

        <div id="footer"> подвал </div>

CSS

body {
    font-family: Ubuntu Mono, Tahoma, Verdana, sans-serif;
}
/* Begin */
#columns {
    display: table;
    width: 100%;
    -moz-box-sizing: border-box;      /* фикс проблемы для Firefox       */
    -webkit-box-sizing: border-box;   /* фикс для старых Chrome и Safari */
    box-sizing: border-box;           /* не поддерживается в CSS2        */
    margin-left: 0;
    margin-right: 0;
}

#columns > div,
#columns > noindex > div {
    display: table-cell;
    vertical-align: top;
    width: auto;
    position: relative;
    -moz-box-sizing: border-box;      /* фикс проблемы для Firefox       */
    -webkit-box-sizing: border-box;   /* фикс для старых Chrome и Safari */
    box-sizing: border-box;           /* не поддерживается в CSS2        */
}
/* More */
#columns > #left,
#columns > noindex > #left {
    max-width: 300px;
    min-width: 300px;
    width: 300px;
}

#columns > #right,
#columns > noindex > #right {
    max-width: 200px;
    min-width: 200px;
    width: 200px;
    overflow: hidden;
}


#left {
    background: #FFDDDD;
}
#center {
    background: #DDFFDD; 
}
#right {
    background: #DDDDFF;
}