Проблемы с фоном HTML при определении размера

Question

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

Я хочу, чтобы содержимое и панель навигации были одинаковой высоты и сохраняли свой фон. Я не был уверен, как это сделать, поэтому я поместил их обоих в div и установил его фон на панели навигации. Когда содержимое расширяется, оно выталкивает содержащий div и показывает правильный фон слева:

http://jsfiddle.net/8Ngey/3/embedded/result/

Однако, если навигация больше, чем содержимое, фон неправильный:

http://jsfiddle.net/8Ngey/2/embedded/result/

Как правильно выполнить то, что я пытаюсь сделать? Кроме того, на заметку, почему содержащийся div имеет высоту 0px, даже если div внутри него имеет высоту, если я не установил содержащий div в значение float left?

редактирование:

Чтобы уточнить, я хочу:

• Страница с содержанием
• Панель навигации, пока страница
• Содержание до страницы
• Содержимое и навигация сохраняют цвета фона

Answer 1

Ах, вы обнаружили почти невозможность столбцов одинаковой высоты в CSS. Есть несколько хакерских решений, но самое простое? Искусственные столбцы .

Просто создайте изображение шириной 1000 пикселей и высотой 1 пиксель и повторите его вертикально на фоне div. Сделайте первые 100 пикселей синего цвета, а следующие 900 пикселей зеленого цвета. Никто не узнает разницу!

#background { background: url(file.png) repeat-y; }

Больше техник (обычно это больше проблем, чем стоит).

---

Чтобы ответить на ваш второй вопрос: плавающие элементы не добавят высоту родительскому элементу (по умолчанию). Чтобы решить эту проблему, просто установите overflow: hidden или overflow: auto на оболочке div ( пример ):

#wrapper { background:black; overflow:hidden; }