Что требуется?
Требовалось на одном 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;
}
Приводить пример как это все выглядит, думаю, смысла не имеет, так как все работает как часы.
Комментарии
Нет комментариев к данной статье.
Комментарии