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

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

Another possible solution:

<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>
 </div>

Also helpful as well.

I'm not sure how I ended up on this post but since most of the answers are using floats, absolute positioning, and other options which aren't optimal now a days, I figured I'd give a new answer that's more up to date on it's standards (float isn't really kosher anymore).

.parent {_x000D_
  display: flex;_x000D_
  flex-direction:row;_x000D_
}_x000D_
_x000D_
.column {_x000D_
  flex: 1 1 0px;_x000D_
  border: 1px solid black;_x000D_
}

<div class="parent">_x000D_
    <div class="column">Column 1</div>_x000D_
    <div class="column">Column 2<br>Column 2<br>Column 2<br>Column 2<br></div>_x000D_
    <div class="column">Column 3</div>_x000D_
</div>

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

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

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

Works in IE8+

Check out a JSFiddle Demo

Why don't try to use bootstrap's solutions. They are perfect if you don't want to meddle with tables and floats.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <!--- This line is just linking the bootstrap thingie in the file. The real thing starts below -->_x000D_
_x000D_
<div class="container">_x000D_
  <div class="row">_x000D_
    <div class="col-sm-4">_x000D_
      One of three columns_x000D_
    </div>_x000D_
    <div class="col-sm-4">_x000D_
      One of three columns_x000D_
    </div>_x000D_
    <div class="col-sm-4">_x000D_
      One of three columns_x000D_
    </div>_x000D_
  </div>_x000D_
</div>

No meddling with complex CSS, and the best thing is that you can edit the width of the columns by changing the number. You can find more examples at https://getbootstrap.com/docs/4.0/layout/grid/

here are two samples: http://jsfiddle.net/H5q5h/1/

one uses float:left and a wrapper with overflow:hidden. the wrapper ensures the sibling of the wrapper starts below the wrapper.

the 2nd one uses the more recent display:inline-block and wrapper can be disregarded. but this is not generally supported by older browsers so tread lightly on this one. also, any white space between the items will cause an unnecessary "margin-like" white space on the left and right of the item divs.

Just add float left property on all the divs you want to make appear in a row other than last one. here is example

<div>
  <div style="float: left;">A</div>
  <div style="float: left;">B</div>
  <div>C</div>
</div>

See my code

.float-left {_x000D_
    float:left;_x000D_
    width:300px; // or 33% for equal width independent of parent width_x000D_
}

<div>_x000D_
    <h2 align="center">San Andreas: Multiplayer</h2>_x000D_
    <div align="center" class="float-left">CONTENT OF COLUMN ONE GOES HERE</div>_x000D_
    <div align="center" class="float-left">CONTENT OF COLUMN TWO GOES HERE</div>_x000D_
    <div align="center" class="float-left">CONTENT OF COLUMN THREE GOES HERE</div>_x000D_
</div>

Old topic but maybe someone will like it.

fiddle link http://jsfiddle.net/74ShU/

<div class="mainDIV">
    <div class="leftDIV"></div>
    <div class="middleDIV"></div>
    <div class="rightDIV"></div>
</div>

and css

.mainDIV{
    position:relative;
    background:yellow;
    width:100%;
    min-width:315px;
}
.leftDIV{
    position:absolute;
    top:0px;
    left:0px;
    height:50px;
    width:100px;
    background:red;
}
.middleDIV{
    height:50px;
    width:100px;
    background:blue;
    margin:0px auto;
}
.rightDIV{
    position:absolute;
    top:0px;
    right:0px;
    height:50px;
    width:100px;
    background:green;
}

Check out the foundation rapid prototyping framework they handled this quite nicely, basically they allow you to use HTML like this:

<div class="row">
    <div class="four columns">
    </div>
    <div class="four columns">
    </div>
    <div class="four columns">
    </div>
</div>

This is the simplest HTML/CSS grid system that I've come across, it's based on 12 column grid.

Basically the columns are given a % width and left margin relative to the parent row. They columns have float set to left, position set to relative, and display set to block.

The row has several properties set on it that care core of an issue that normally causes the containing div to collapse to height of 0 preventing the following divs from getting 'pushed' down as they should.

You can find examples of using the foundation grid system here: http://foundation.zurb.com/docs/grid.php

If you don't want to use the entire framework the following CSS should do the trick with the example code I provided:

.row:after {
    content: "";
    clear: both;
    display: table;
}

.four.column {
    float: left;
    width: 33%;
}

If you really specifically want a left center and right columns then use code like this:

CSS:

.row:after {
    content: "";
    clear: both;
    display: table;
}

.left {
    float: left;
    width: 100px;
}

.center {
    margin: 0 auto;
    width: 100px;
}

.right {
    float: right;
    width: 100px;
}

HTML:

<div class="row">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</div>

This is easier and gives purpose to the never used unordered/ordered list tags.

In your CSS add:

    li{float: left;}  //Sets float left property globally for all li tags.

Then add in your HTML:

    <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>        
    </ul>

Now watch it all line up perfectly! No more arguing over tables vs divs!

2019 answer:

Using CSS grid:

.parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
}

Put the divisions in 'td' tag. That's it done.