CODEWITHSUNDEEP
csshtml
Mr.Blue
Mr.Blue

Reputation: 862

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

Upvotes: 86

Views: 358797

Answers (12)

avrahamcool
avrahamcool

Reputation: 14094

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

Upvotes: 155

Gabriel Santos
Gabriel Santos

Reputation: 4974

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>

Upvotes: 43

mikemaccana
mikemaccana

Reputation: 123610

2019 answer:

Using CSS grid:

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

Upvotes: 11

dev404
dev404

Reputation: 1135

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/

Upvotes: 1

k2snowman69
k2snowman69

Reputation: 1929

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>

Upvotes: 34

user6591908
user6591908

Reputation: 19

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!

Upvotes: 1

Wolf
Wolf

Reputation: 11

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.

Upvotes: 0

greko
greko

Reputation: 225

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

Upvotes: 11

faisalbhagat
faisalbhagat

Reputation: 2160

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>

Upvotes: 3

Pankaj Parashar
Pankaj Parashar

Reputation: 10232

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

Upvotes: 0

Joseph
Joseph

Reputation: 119887

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.

Upvotes: 11

Luis Perez
Luis Perez

Reputation: 28140

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>

Upvotes: 0

Related Questions