Высота дочернего элемента превышает высоту родительского элемента

Question

Я хочу воссоздать шаблон для Joomla, но используя этот код HTML ( HTML на patebin.com ) и этот код CSS ( CSS на pastebin.com ), оболочку div (parent) отображается с меньшей высотой, чем содержимое div (child). Я уже использовал Google, но добавление ясно: ни div, ни изменение высоты не сработали.

€: только IE5.5 и 6 отображают высоту div, как я хочу.

Answer 1

Попробуйте это: ( Pastebin.com )

• Я удалил все стили высоты из CSS;

• плавает #content div, чтобы он не перекрывал #nav;

• и в класс #wrapper добавлен класс .clearfix, в котором хранятся плавающие элементы, добавленные невидимое содержимое в начало и конец оболочки #.

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

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
} /* works for all browser but IE 6/7 */

.clearfix:after { clear: both; }

.clearfix { zoom: 1; } /* fix for IE 6/7 (triggers hasLayout) */

Подробнее о .clearfix можно прочитать здесь .