Верстка: два блока одинаковой высоты

[neJa]

Ээээ, мы что вернулись в прошлое? Зачем опять IE6? Сейчас уже и IE7 почти никто не поддерживает.

[realise]

aside в таком вариаенте не растянет по высоте блок article. То есть это работает только если меню заведомо больше по высоте чем контент. Тогда не могу понять чем этот вариант принципиально отличается от обычного float left

[realise]

*если контент заведомо больше чем меню, конечно

[SergeiRyabokon]

Антон, спасибо Вам за замечание! По заданию так раз article должен растягивать aside, а не наоборот. Возможно путаница возникла из-за того, что что блок расположеный слева упоминется как второй в постановке задачи (поскольку он второй по приоритету — то есть содержит менее приоритетный контент и зависит в визуальном отображении от первого). Чтоб было нагляднее, чуть подправил описание (добавил упоминание о том, что второй блок находится слева от первого) и привязал скриншот к последнему примеру.

Важно отметить что для работы IE 8 с новыми HTML5-тэгами aside и article необходимо добавить избыточное CSS-правило display: block для ASIDE, ARTICLE тэгов и вставить в HEAD-раздел веб-страницы следующий js:

<!--[if lt IE 9]>
   <script type="text/javascript">
      document.createElement('article');
      document.createElement('aside');
   </script>
<![endif]-->

надеюсь статья кому-нибудь пригодится

[CyberAP]

Забейте на старые браузеры, верстайте такие вещи флексбоксом с фоллбэком на table-cell (для IE 8).

[SergeiRyabokon]

Помимо Table, Block, Inline-block layout'ов (значений параметра display) стандарт HTML5 содержит еще один дополнительный Flexbox layout (флексбоксы они же flexible box layout) — нововведение в CSS3 для упрощения верстки «резиновых» блоков.

Технология флексбокос существует в двух версиях: старой образца 2009го года (поддерживается Chrome, Firefox 2+, Safari 3.1+) от которой сейчас постепенно отказываются и новой 2012го (Chrome 21+, Opera 12.1+, IE 10). К сожалению на данный момент (июнь 2013го) в Mozilla Developer Network (MDN) в перечне layout'ов статус реализации flexbox layout'а все находится еще в состоянии «experimental» (ссылка на источник в MDN).

Детальнее о технологии можно почитать в таких публикациях:
— developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
— www.html5rocks.com/en/tutorials/flexbox/quick/
— css-tricks.com/old-flexbox-and-new-flexbox/

[CyberAP]

Упрощу вам задачу.

[SergeiRyabokon]

Спасибо! Важно заметить, что IE поддерживает flexbox начиная только с десятой версии, а реализация стандарта в других браузерах находится в стадии активной разработки (приходится пользоваться префиксами -moz-, -webkit и т.д. в написании CSS правил). Тем не менее еще раз спасибо Вам Станислав за то что упомянули флексбоксы в комментарии, безусловно это очень крутая технология.

[SergeiRyabokon]

В принципе верно, но судя по документу dev.w3.org/csswg/css-flexbox/ готовится очередная третья редакция Flexbox Layout от 2013 года, которая сейчас находится в состоянии Editors Draft и видимо заменит предыдущие версии Flexible box Layout'а 12го и 9го годов.

Говоря практически — зачем использовать экспериментальную технологию макетирования, используя которую придется добавить два избыточных wrap-элемента в структуру документа для поддержки деградации в table-layout, если в случае упомянутом в разделе «Решение» достаточно воспользоваться простой блочной разметкой (реализованой в том числе в IE 8) с процентым значением высоты без добавления каких-либо добавочных элементов?

[Sharm]

… к сожалению, такой подход не работал в старших версиях браузеров (IE 6, IE 7) заставляя верстальщиков искать другие подходы

Немного удивило, что предлагаемое в конце решение работает только в IE8+

[evil_random]

В webkit используется display: table — display: table-cell без оберточного table-row получите проблемы с шириной

[Anonym]

Уже столько написано по этому поводу.