title: css layout problem - full width sections with auto height?
body: <p>i have a few problems setting up a layout with horizontal sections that should have an automatic height depending on it's content.</p>
  
  <p>This is my page structure.</p>
  
  <pre><code>&lt;div id="#page-wrap"&gt;
  &lt;header&gt;
      &lt;div class="inner"&gt;
          #navigation
          #logo floated right
      &lt;/div&gt;
  &lt;/header&gt;
  &lt;section id="services"&gt;
      &lt;div class="inner"&gt;
          #some floated boxes
      &lt;/div&gt;
  &lt;/section&gt;
  &lt;section id="main"&gt;
      &lt;div class="inner"&gt;
          #secteion content
          #aside sidebar
      &lt;/div&gt;
  &lt;/section&gt;
  &lt;footer&gt;
      &lt;div class="inner"&gt;
          #footer stuff
      &lt;/div&gt;
  &lt;/footer&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>header, sections and footer are always 100% wide.
  each section has a .inner div which is centered with margin: 0 auto.</p>
  
  <pre><code>.inner {
      margin: 0 auto;
      padding: 96px 72px 0;
      width: 1068px;
      color: #3C3C3C;
  }
  </code></pre>
  
  <p>and as example this is my header:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>THE PROBLEM: if i don't set the header to a specific height the background image get's cut off. If i inspect the header with a develper tool like firebug the navigation inside of it is kind of outside the the header-box. So if i don't set the height of 100px the horizontal navigation cuts off the the background image - even though it's in the same header.</p>
  
  <p>any idea what i have to consider here.</p>