title: Aligning five divs next to each other
body: <p>I'm currently making a website where you can find results of Formula One races. To do so, I want to make a result page for each Grand Prix, where the results are being shown in 5 boxes next to each other. Like this:</p>
  
  <pre><code>1 2 3 4 5
  </code></pre>
  
  <p>But right now it looks like this</p>
  
  <pre><code>1 2
     3
  4    5
  </code></pre>
  
  <p>This is the HTML code I use:</p>
  
  <pre><code>&lt;div id="wrap"&gt;
      &lt;div id="fp1"&gt;FP1&lt;/div&gt;
      &lt;div id="fp2"&gt;FP2&lt;/div&gt;
      &lt;div id="fp3"&gt;FP3&lt;/div&gt;
      &lt;div id="qual"&gt;Qual&lt;/div&gt;
      &lt;div id="race"&gt;Race&lt;/div&gt;
  &lt;/div&gt; &lt;!--End wrap div--&gt;
  </code></pre>
  
  <p>And this the CSS I use:</p>
  
  <pre><code>#wrap{
  width: 100%;
  height: 600px;
  background-color: #000;
  border: 1px solid white;
  }
  #fp1{
  width: 20%;
  height: 600px;
  background-color: #333;
  float: left;
  }
  #fp2{
  margin-left: 20%;
  width: 20%;
  height: 600px;
  background-color: #666;
  }
  #fp3{
  margin-left: 40%;
  width: 20%;
  height: 600px;
  background-color: #333;
  }
  #qual{
  margin-left: 60%;
  width: 20%;
  height: 600px;
  background-color: #666;
  float: right;
  }
  #race{
  width: 20%;
  height: 600px;
  background-color: #333;
  float: right;
  }
  </code></pre>
  
  <p>Anybody who knows how to fix it?</p>