CSS Floats и динамический контент

Question

У меня есть страница с панелью навигации вверху.В навигационной панели есть 2 набора меню (ul).Один сет плавает влево, другой - вправо.Затем под всем меню находится контент, который находится в потоке.

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

• сдвинуть содержимое вниз по мере его роста
• не может иметь фиксированную высоту.

Любой способ сделать это,но «эффект» меню плавал на противоположной стороне страницы?

Answer 1

добавьте overflow: auto; в DIV или любой другой элемент контейнера вокруг двух навигационных UL.

#header { overflow: auto; }

<div id="header">
 <ul id="primaryNav">...</ul>
 <ul id="secondaryNav">...</ul>
</div>

<div id="content">...</div>

Answer 2

Используйте этот css и задайте родительский класс для этих UL (навигационная панель) класса clearfix. Таким образом, вам не нужно указывать фиксированную высоту, и они будут толкать содержимое вниз.

CSS вам нужно:

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}