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

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

У всех верстальщиков и людей, которые создают сайты есть свои приемы, которыми они пользуются, к примеру, для реализации закругленных углов, отображения теней блоков и текста и т.д. К таким вот трюкам относится и выравнивание 2 блоков DIV по высоте.

Есть много решений, которые обладают как достоинствами, так и недостатками, но почему-то у них больше всего недостатков: то очень замудренные, то используют дополнительные графические элементы, то еще что-то.

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

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

Хороший верстальщик просто обязан верстать с оглядкой на стандарты, иначе может просто получиться, что ваш сайт будут посещать меньшее количество человек, чем могло бы быть. Получается, что аренда серверов, нанятый первоклассный копирайтер и уникальный дизайн, не спасет положение. А все потому, что все браузеры, кроме IE, стараются постоянно развиваться параллельно стандартам W3C, а ваш сайт со временем, использующий нестандартные методы, будет неправильно в них отображаться.

Согласитесь, что сложно объяснить заказчику, что 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;
     }

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

Комментарии:

  1. Макс Ковалёв опубликовал комментарий 24 Апрель 2012, 12:30 #

    Забыли про float!
    Только при таком способе нельзя поставить бордер, иначе нижняя граница не показывается!

    | Ответить
  2. Владимир опубликовал комментарий 29 Июнь 2012, 01:01 #

    правая по левой равняется (когда левая > правой), а вот левая по правой ни в какую!

    | Ответить
Имя
e-mail
Сайт
Текст комментария: