title: How do you position CSS elements directly under each other?
body: <p>I know there is probably a solved question like this, but I've searched and I couldn't a solution.</p>
  
  <p>So, look. I have the basics for a website. A header, featured content, main content, and footer. I want the main content to fall under the featured content, but right now it's behind it. How can I make it go right underneath it?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;link href="style.css" type="text/css" rel="stylesheet"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="navigation"&gt;&lt;/div&gt;
      &lt;div class="content-featured"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>html, body { 
  margin: 0; 
  padding: 0; 
  }
  
  .navigation {
  float: left;
  padding: 15px 0;
  min-width: 100%;
  opacity: .48; /* layer alpha */
  background-color: #1f1f1f; /* layer fill content */
  height: 20px;
  }
  
  .content-featured {
  height: 384px;
  background-image: -moz-linear-gradient(bottom left, #1db568 -25%, #1db568 17.74%, #257755 125%); /* gradient overlay */
  background-image: -o-linear-gradient(bottom left, #1db568 -25%, #1db568 17.74%, #257755 125%); /* gradient overlay */
  background-image: -webkit-linear-gradient(bottom left, #1db568 -25%, #1db568 17.74%, #257755 125%); /* gradient overlay */
  background-image: linear-gradient(bottom left, #1db568 -25%, #1db568 17.74%, #257755 125%); /* gradient overlay */
  }
  
  .content-main {
  height: 308px;
  }
  </code></pre>