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

Css Problem Overview

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

Css Solutions

Solution 1 - Css

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>

Works in IE8+

Check out a JSFiddle Demo

Solution 2 - Css

See my code

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

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

Solution 3 - Css

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 {
  display: flex;
  flex-direction:row;
}

.column {
  flex: 1 1 0px;
  border: 1px solid black;
}

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

Solution 4 - Css

2019 answer:

Using CSS grid:

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

Solution 5 - Css

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.

Solution 6 - Css

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

Solution 7 - Css

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>

Solution 8 - Css

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!

Solution 9 - Css

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

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      One of three columns
    </div>
    <div class="col-sm-4">
      One of three columns
    </div>
    <div class="col-sm-4">
      One of three columns
    </div>
  </div>
</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/

Solution 10 - Css

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>

Solution 11 - Css

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

Solution 12 - Css

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.

Content Type	Original Author	Original Content on Stackoverflow
Question	Mr.Blue	View Question on Stackoverflow
Solution 1 - Css	avrahamcool	View Answer on Stackoverflow
Solution 2 - Css	Gabriel Santos	View Answer on Stackoverflow
Solution 3 - Css	k2snowman69	View Answer on Stackoverflow
Solution 4 - Css	mikemaccana	View Answer on Stackoverflow
Solution 5 - Css	Joseph	View Answer on Stackoverflow
Solution 6 - Css	greko	View Answer on Stackoverflow
Solution 7 - Css	faisalbhagat	View Answer on Stackoverflow
Solution 8 - Css	user6591908	View Answer on Stackoverflow
Solution 9 - Css	dev404	View Answer on Stackoverflow
Solution 10 - Css	Luis Perez	View Answer on Stackoverflow
Solution 11 - Css	Pankaj Parashar	View Answer on Stackoverflow
Solution 12 - Css	Wolf	View Answer on Stackoverflow