Главная > Полезности > DIV колонки одинаковой высоты на CSS

DIV колонки одинаковой высоты на CSS


23-10-2014, 11:51. Разместил: kuper
 <div id="header"> шапка </div>

        <div id="columns">
            <div id="left">   левая колонка       </div>
            <div id="center"> центральная колонка </div>
            <div id="right">  правая колонка      </div>
        </div>

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



/* обёртка колонок */

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

/* левая колонка */

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

Вернуться назад