Aligning five divs next to each other

Question

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:

1 2 3 4 5

But right now it looks like this

1 2
   3
4    5

This is the HTML code I use:

<div id="wrap">
    <div id="fp1">FP1</div>
    <div id="fp2">FP2</div>
    <div id="fp3">FP3</div>
    <div id="qual">Qual</div>
    <div id="race">Race</div>
</div> <!--End wrap div-->

And this the CSS I use:

#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;
}

Anybody who knows how to fix it?

Answer 1

please check this: http://jsfiddle.net/itz2k13/KAwEz/

#fp1{
  width: 20%;
  height: 600px;
  background-color: #333;
  float: left;
}
 .....

You can use a generic class, since styles are repetitive. see this for efficient one: http://jsfiddle.net/itz2k13/KAwEz/1/