css - How do I line up 3 divs on the same row?

Question

Can someone please help me with this problem as i have been dealing with it for a long time now....

I am trying to get 3 divs on the same line next to each other one of the divs looks like this:

<div>  
  <h2 align="center">San Andreas: Multiplayer</h2>  
  <div align="center">
    <font size="+1">  
      <em class="heading_description">15 pence per slot</em>  
    </font>  
    <img src="http://fhers.com/images/game_servers/sa-mp.jpg" class="alignleft noTopMargin" style="width: 188px; ">  
    <a href="gfh" class="order-small">  
      <span>order</span></a>  
  </div>

and the other two are the same divs please help me get all three divs on the same line one on the right one on the mid and one on the left

Answer 1

I'm surprised that nobody gave CSS table layout as a solution:

.Row {
    display: table;
    width: 100%; /*Optional*/
    table-layout: fixed; /*Optional*/
    border-spacing: 10px; /*Optional*/
}
.Column {
    display: table-cell;
    background-color: red; /*Optional*/
}

<div class="Row">
    <div class="Column">C1</div>
    <div class="Column">C2</div>
    <div class="Column">C3</div>
</div>