Проблема компоновки CSS - полная ширина разделов с автоматической высотой?

Question

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

Это моя структура страницы.

<div id="#page-wrap">
<header>
    <div class="inner">
        #navigation
        #logo floated right
    </div>
</header>
<section id="services">
    <div class="inner">
        #some floated boxes
    </div>
</section>
<section id="main">
    <div class="inner">
        #secteion content
        #aside sidebar
    </div>
</section>
<footer>
    <div class="inner">
        #footer stuff
    </div>
</footer>
</div>  

заголовок, разделы и нижний колонтитул всегда имеют ширину 100%. каждый раздел имеет .inner div, который центрируется с полем: 0 auto.

.inner {
    margin: 0 auto;
    padding: 96px 72px 0;
    width: 1068px;
    color: #3C3C3C;
}

и в качестве примера это мой заголовок:

header .inner {
    background: #fff url('images/years.png') no-repeat top right;
    position:relative;
    /*height:100px;*/
}

#logo {
    position:absolute;
    right:70px;
    top:15px;
    float:right;
}

ПРОБЛЕМА: если я не установлю заголовок на определенную высоту, фоновое изображение будет обрезано. Если я проверяю заголовок с помощью инструмента develper, например, firebug, то навигация внутри него отчасти выходит за рамки заголовка. Поэтому, если я не установлю высоту 100 пикселей, горизонтальная навигация обрезает фоновое изображение - даже если оно находится в том же заголовке.

Любая идея, что я должен рассмотреть здесь.

Answer 1

Я думаю, что это может быть проблема с исправлением-- вы можете попробовать добавить <div style="clear: both;"></div> перед закрытием заголовка или добавить следующие свойства в заголовок

.header {
    overflow: hidden;
    display: inline-block; /* Necessary to trigger "hasLayout" in IE */
    display: block; /* Sets element back to block */
}

однако, если ваша навигация будет иногда выводить вещи из своего контейнера (например, выпадающий список), лучше использовать метод, подобный методу http://www.positioniseverything.net/easyclearing.html.

наконец, вы также можете попробовать обернуть все это (заголовок и содержимое) в другой div, который будет иметь только свойство background. таким образом изображение bg не будет обрезано.

Answer 2

вы утверждаете, что он должен иметь автоматическую высоту в зависимости от содержимого, а затем утверждаете, что проблема в том, что фон обрезается. Итак, что именно вы ищете? минимальная высота 100px, которая увеличивается, если содержание больше? или вы ожидали, что nav будет иметь высоту 100px (таким образом, заголовок будет равен 100px)? это немного сбивает с толку ... во всяком случае, заголовок будет иметь нулевую высоту, если высота не установлена, и его дочерние элементы являются плавающими. для меня это звучит так, как будто вы хотите, чтобы заголовок был 100px для отображения всего фона - если это так, просто установите высоту заголовков на 100px (как вы сделали)

edit // Вы также заявили, что логотип плавает, но затем покажите, что он расположен абсолютно - что это? и как позиционируется навигация? нужна дополнительная информация

Answer 3

Элементы

header, section и footer не являются контейнерами - если вы хотите, чтобы они вели себя так, как если бы они были, вы должны установить их display: block - это заставит их вести себя как обычно div будет