Решение проблемы в 2-х и более колоночной блочной верстке с исчезающим фоном в центральном контейнере для броузеров Opera и Firefox (Firefox & Opera float background problem).

Пример

Имеем HTML

<div id="left_block"></div>
<div id="right_block"></div>
<div id="content"></div>

и CSS

#left_block
                       {
                       float:left;
                       background-color:#FFFFFF;
                       width:30%;
                       }   

#right_block
                        {
                        float:right;
                        background-color:#FFFFFF;
                        width:30%;
                        }   

#center_block
                       {
                       padding-left:32%;
                       padding-right:32%;
                       }   

#content
                       {
                       background:#FFFFFF;
                       display:table;
                       }

Если контента в левом и правом блоках по высоте больше, чем в центральном блоке (такое явление зачастую встречается на “портальных” сайтах, “перегруженных” рекламными объявлениями), то в броузерах Opera и Firefox появится неприятный “глюк”. Смотрите пример.

Решаем проблему добавлением display:table в #content.

#content
                      {
                      background:#FFFFFF;
                      display:table;
                      }

Смотрите второй пример

Что касается IE, то display:table этот браузер игнорирует, а избавление от “глюка” проводится путем внедрения свойства height:100% в #content

Опубликовано в рубриках: Техцех. Вы можете следить за ответами к этой записи через RSS 2.0. Вы можете оставить свой отзыв или трекбек со своего сайта.