2 DIV`а одинаковой высоты

Опубликовано
Комментарии Нет

Что требуется?

Требовалось на одном web-проекте заказчика реализовать выравнивание высоты 2 блоков DIV по высоте. Использовалось это для красивого вывода двухколоночного интерфейса. Реализация всего этого должно легко проходить валидацию и работать в большинстве современных браузеров.

Согласитесь, что сложно объяснить заказчику, что Internet Explorer 6 уже очень старый и ровняться на него – это давать ему последний шанс, когда большинство его клиентов пользуются именно им.

Выравниваем два блока DIV по высоте

После своего успешного применения, я решил выложить его на этом блоге, так как уверен, что понадобится он мне еще не один раз.

Кстати, этот метод не ограничивается именно 2 DIV`ами. Его можно применять к любому количеству DIV-блоков.

Собственно для того, чтобы 2 блока DIV были одинаковой высоты и высота каждого из них зависела от высоты другого, нам нужно нет так уж много.

HTML-коду:

<div id="content">
  <div id="sideleft">Блок №1</div>
  <div id="sideright">Блок №2</div>
</div>

Соответствует CSS-код:

#content {
     overflow: hidden;
     _zoom: 1;
     }
#content #sideleft, #content #sideright {
     padding-bottom: 10000px;
     margin-bottom: -10000px;
     }

Приводить пример как это все выглядит, думаю, смысла не имеет, так как все работает как часы.

Автор

Комментарии

Нет комментариев к данной статье.

Комментарии

Поля обозначенные как * требуются обязательно. Перед постингом всегда делайте просмотр своего комментария.





← Старые Новые →