title: CSS overlapping sections
body: <p>I am working on a website and I have an unordered list of buttons in my HTML, after which there is more content. But the problem is that sections are stacked on top of those buttons. <code>#advertising</code> is 0px in height, that is probably why it is being stacked on top of the buttons.</p>
  
  <p>I do not know how to solve this problem, though.</p>
  
  <p><a href="http://jsfiddle.net/PP6B7/1/" rel="nofollow">JsFiddle</a></p>
  
  <p><strong>EDIT:</strong>
  Deleted line 8. That was debugging purpose, not related to the question.</p>
  
  <p><strong>My HTMLcode</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Zien! Woningmarketing&lt;/title&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,300,600,700' rel='stylesheet' type='text/css'&gt;
      &lt;link rel="stylesheet" href="css/mobile.css"/&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;header&gt;
      &lt;nav&gt;
          &lt;figure&gt;
              &lt;span class="helper"&gt;&lt;/span&gt;&lt;img src="http://placehold.it/180x55" alt="Zien Woningmarketing"/&gt;
          &lt;/figure&gt;
          &lt;a href="#"&gt;&lt;img src="http://placehold.it/45x20" alt="Menuknop: open het menu"/&gt;&lt;/a&gt;
      &lt;/nav&gt;
  &lt;/header&gt;
  &lt;section id="intro-image"&gt;
      &lt;figure&gt;
          &lt;img src="img/foto-bg.png" alt="Professionele woningfotografie"/&gt;
      &lt;/figure&gt;
      &lt;h1&gt;&lt;span&gt;Professionele Woningfotografie&lt;/span&gt;&lt;/h1&gt;
  &lt;/section&gt;
  &lt;section id="wat-doen-we"&gt;
      &lt;h2&gt;Wat doen we?&lt;/h2&gt;
      &lt;span&gt;We verzorgen &lt;span class="em"&gt;krachtige&lt;/span&gt; en &lt;span class="em"&gt;mooie&lt;/span&gt; woningvisualisaties&lt;/span&gt;
  &lt;/section&gt;
  &lt;section id="buttons"&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;img src="http://placehold.it/60x60" alt="icon" /&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;span&gt;Fotografie&lt;/span&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;img src="http://placehold.it/15x60" alt="chevron" /&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;hr /&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;img src="http://placehold.it/60x60" alt="icon" /&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;span&gt;360&amp;deg; foto&amp;#39;s&lt;/span&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;img src="http://placehold.it/15x60" alt="chevron" /&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;hr /&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;img src="http://placehold.it/60x60" alt="icon" /&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;span&gt;Plattegronden&lt;/span&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;img src="http://placehold.it/15x60" alt="chevron" /&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;hr /&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;img src="http://placehold.it/60x60" alt="icon" /&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;span&gt;Artist Impressions&lt;/span&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;img src="http://placehold.it/15x60" alt="chevron" /&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;hr /&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;img src="http://placehold.it/60x60" alt="icon" /&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;span&gt;Video&lt;/span&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;img src="http://placehold.it/15x60" alt="chevron" /&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;hr /&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;img src="http://placehold.it/60x60" alt="icon" /&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;span&gt;Inmeten&lt;/span&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;img src="http://placehold.it/15x60" alt="chevron" /&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/section&gt;
  &lt;section id="advertising"&gt;
      &lt;figure&gt;
          &lt;img src="img/advertising-bg.png" alt="" /&gt;
          &lt;figcaption&gt;
              &lt;span&gt;&amp;OpenCurlyDoubleQuote;Creative without strategy is called &amp;#39;art&amp;#39;.&lt;/span&gt;
              &lt;span&gt;Creative with strategy is called &amp;#39;advertising&amp;#39;.&amp;CloseCurlyDoubleQuote;&lt;/span&gt;
          &lt;/figcaption&gt;
          &lt;em&gt;- Jef I. Richards&lt;/em&gt;
      &lt;/figure&gt;
  &lt;/section&gt;
  &lt;section id="wat-nog-meer"&gt;
      &lt;h2&gt;Wat doen we nog meer?&lt;/h2&gt;
      &lt;span&gt;We zorgen voor &lt;span class="em"&gt;marketing&lt;/span&gt; om je woning te &lt;span class="em"&gt;promoten&lt;/span&gt;&lt;/span&gt;
  &lt;/section&gt;
  &lt;section id="marketing"&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;span&gt;Woningmarketing&lt;/span&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;img src="http://placehold.it/15x60" /&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/section&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSSFile</strong></p>
  
  <pre><code>html, body, * {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 18px;
  }
  header nav {
      background-color: rgb(0, 0, 0);
      width: 100%;
      height: 75px;
  }
  
  header nav figure {
      display: inline;
  }
  
  header nav figure img {
      margin-left: 7.142857%;
      position: relative;
      top: 50%;
      height: 55px;
      margin-top: -27.5px; /* negative half of the height */
  }
  
  header nav a img {
      margin-right: 7.142857%;
      float: right;
      position: relative;
      top: 50%;
      height: 20px;
      margin-top: -10px; /* negative half of the height */
  }
  #intro-image figure img{
      position: relative;
      top: -40px;
      z-index: -1;
      width: 100%;
      box-shadow: 0 0 64px black;
  }
  #intro-image h1{
      position: absolute;
      top: 300px;
      text-align: center;
      width: 100%;
  }
  #intro-image h1 span{
      font-family: 'Titillium Web', sans-serif;
      font-weight: 400;
      color: white;
      font-size: 2em;
      text-transform: uppercase;
      text-shadow: 2px 2px 2px black;
  }
  #wat-doen-we{
      text-align: center;
  }
  #wat-doen-we h2{
      font-family: 'Titillium Web', sans-serif;
      font-size: 12pt;
      color: rgb(64, 64, 64);
      text-transform: uppercase;
      font-weight: 400;
  }
  #wat-doen-we span{
      font-family: 'Titillium Web', sans-serif;
      font-size: 18pt;
      color: rgb(64, 64, 64);
      text-transform: uppercase;
  }
  #wat-doen-we span.em{
      color: rgb(214, 55, 45);
      font-size: 1em;
  }
  #buttons{
      margin-top: 40px;
  }
  #buttons ul{
      list-style-type: none;
      height: 90px;
  }
  #buttons ul li{
      display: block;
  }
  #buttons ul li ul{
      background-color: rgb(214, 55, 45);
      clear: both;
  }
  #buttons ul li ul li{
      display: inline;
  }
  #buttons ul li ul li img{
      margin-left: 10.4285714%;
      float: left;
      position: relative;
      top: 50%;
      height: 60px;
      margin-top: -30px; /* negative half of the height */
  }
  #buttons ul li ul li span{
      margin-left: 5%;
      position: relative;
      top: 50%;
      height: 40px;
      margin-bottom: -20px;
      vertical-align: baseline;
      font-family: 'Titillium Web', sans-serif;
      text-transform: uppercase;
      color: rgb(246, 246, 246);
  }
  #buttons ul li ul li a img{
      float: right;
      margin-right: 7.142857%;
      position: relative;
      top: 50%;
      height: 60px;
      margin-top: -30px; /* negative half of the height */
  }
  #buttons ul li ul li a img:hover{
      box-shadow: 0 0 12px rgb(246, 246, 246);
  }
  hr{
      color: rgb(246, 246, 246);
      background-color: rgb(246, 246, 246);
      height: 1px;
  }
  #advertising{
      clear: both;
  }
  #advertising figure img{
      width: 100%;
      padding-top: 40px;
  }
  #advertising figure figcaption{
      position: absolute;
      top: 625px;
      text-align: center;
      width: 100%;
      font-family: 'Titillium Web', sans-serif;
      font-weight: 400;
      color: white;
      font-size: 1.25em;
      text-transform: uppercase;
      display: block;
      text-shadow: 2px 2px 2px black;
  }
  #advertising figure em{
      display: block;
      position: absolute;
      top: 710px;
      right: 20px;
      color: white;
      font-family: 'Titillium Web', sans-serif;
      font-weight: 400;
      font-size: 1em;
  }
  #wat-nog-meer{
      text-align: center;
      clear: both;
  }
  #wat-nog-meer h2{
      font-family: 'Titillium Web', sans-serif;
      font-size: 12pt;
      color: rgb(64, 64, 64);
      text-transform: uppercase;
      font-weight: 400;
  }
  #wat-nog-meer span{
      font-family: 'Titillium Web', sans-serif;
      font-size: 18pt;
      color: rgb(64, 64, 64);
      text-transform: uppercase;
  }
  #wat-nog-meer span.em{
      color: rgb(214, 55, 45);
      font-size: 1em;
  }
  #marketing{
      padding-top: 80px;
  }
  #marketing ul{
      list-style-type: none;
      height: 90px;
      clear: both;
  }
  #marketing ul li{
      display: inline-block;
  }
  #marketing ul li ul{
      background-color: rgb(214, 55, 45);
      clear: both;
  }
  #marketing ul li ul li{
      display: inline;
  }
  #marketing ul li ul li span{
      margin-left: 5%;
      position: relative;
      top: 50%;
      height: 40px;
      margin-bottom: -20px;
      vertical-align: middle;
      font-family: 'Titillium Web', sans-serif;
      text-transform: uppercase;
      color: rgb(246, 246, 246);
  }
  #marketing ul li ul li a img{
      float: right;
      margin-right: 7.142857%;
      position: relative;
      top: 50%;
      height: 60px;
      margin-top: -30px; /* negative half of the height */
  }
  </code></pre>