289

I know how to make 2 divs float side by side, simply float one to the left and the other to the right.

But how to do this with 3 divs or should I just use tables for this purpose?

dippas
  • 58,591
  • 15
  • 114
  • 126
Dameon
  • 2,899
  • 2
  • 16
  • 3
  • 3
    Not enough information. How wide are the layers? – Josh Stodola Jan 28 '10 at 18:01
  • 8
    I'd `display: inline-block` those guys rather than float them. If their widths are in total less than the container width they'll sit next to each other. – Adam Waite Jul 13 '14 at 23:32
  • I recommend using "display: table". It is the most maintainable and reliable solution. see http://stackoverflow.com/questions/14070787/how-do-i-emulate-a-table-with-divs-css – John Henckel Nov 11 '16 at 20:43

16 Answers16

318

Just give them a width and float: left;, here's an example:

<div style="width: 500px;">
 <div style="float: left; width: 200px;">Left Stuff</div>
 <div style="float: left; width: 100px;">Middle Stuff</div>
 <div style="float: left; width: 200px;">Right Stuff</div>
 <br style="clear: left;" />
</div>
Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
156

The modern way is to use the CSS flexbox, see support tables.

.container {
  display: flex;
}
.container > div {
  flex: 1; /*grow*/
}
<div class="container">
  <div>Left div</div>
  <div>Middle div</div>  
  <div>Right div</div>
</div>

You can also use CSS grid, see support tables.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* fraction*/
}
<div class="container">
  <div>Left div</div>
  <div>Middle div</div>  
  <div>Right div</div>
</div>
Stickers
  • 75,527
  • 23
  • 147
  • 186
54

It is same way as you do for the two divs, just float the third one to left or right too.

<style>
  .left{float:left; width:33%;}
</style>

<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>
Sarfraz
  • 377,238
  • 77
  • 533
  • 578
  • 3
    But DIV is a block level element, right? Then how come they are placed side by side and not in the next lines(as block level elements start and end with a line break). Does float have some other affect on it also? – Ashwin Mar 31 '13 at 01:58
26

float them all left

make sure a width is specified that they can all fit in their container (either another div or the window), otherwise they will wrap

davidosomething
  • 3,379
  • 1
  • 26
  • 33
23
<br style="clear: left;" />

that code that someone posted up there, it did the trick!!! when i paste it just before closing the Container DIV, it helps clear all subsequent DIVs from overlapping with the DIVs i've created side-by-side at the top!

<div>
<div class="left"></div>
<div class="left"></div>
...
...
<div class="left"></div>
<!--  then magic trick comes here  -->
<br style="clear: left;" />
</div>

tadaa!! :)

Migisha
  • 415
  • 4
  • 10
14

Float all three divs to the left. Like here:

.first-div {
  width:370px;
  height:150px;
  float:left;
  background-color:pink;
}

.second-div {
  width:370px;
  height:150px;
  float:left;
  background-color:blue;
}

.third-div {
  width:370px;
  height:150px;
  float:left;
  background-color:purple;
}
cfi
  • 10,915
  • 8
  • 57
  • 103
Arwen
  • 205
  • 3
  • 10
  • 6
    The point is that my answer is the most correct one and when a new person will be searching this Q on internet they will come across my answer which would be the most helpful for them. – Arwen Oct 17 '14 at 20:18
  • 2
    That may be. But it lacks any explanation. It is ok on this site to copy other answers, merging multiple partial answers into one combined better answer. You could edit and complete yours. However new users have a few restrictions (upvoting, few links), so I'd still recommend to not focus on old and answered questions. – cfi Oct 18 '14 at 05:57
  • @cfi thank you, I will keep it for future reference. – Arwen Oct 18 '14 at 22:28
  • This seems to repeat multiple answers that existed for years already. – TylerH Feb 26 '21 at 15:02
11
<style>
.left-column
{
float:left;
width:30%;
background-color:red;
}
.right-column
{
float:right;
width:30%;
background-color:green;
}
.center-column
{
margin:auto;
width:30%;
background-color:blue;
}
</style>

<div id="container">
<section class="left-column">THIS IS COLUMN 1 LEFT</section>
<section class="right-column">THIS IS COLUMN 3 RIGHT</section>
<section class="center-column">THIS IS COLUMN 2 CENTER</section>
</div>

the advantage of this way is you can set each column width independant of the other as long as you keep it under 100%, if you use 3 x 30% the remaining 10% is split as a 5% divider space between the collumns

SugaComa
  • 131
  • 1
  • 4
10

I usually just float the first to the left, the second to the right. The third automatically aligns between them then.

<div style="float: left;">Column 1</div>
<div style="float: right;">Column 3</div>
<div>Column 2</div>
Nick Travers
  • 131
  • 1
  • 5
7

try to add "display: block" to the style

<style>
   .left{
          display: block;
          float:left; 
          width:33%;
    }
</style>


<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>
Ann
  • 79
  • 1
  • 3
7

you can float: left for all of them and set the width to 33.333%

Daniel A. White
  • 187,200
  • 47
  • 362
  • 445
7

I didn't see the bootstrap answer, so for what's it's worth:

<div class="col-xs-4">Left Div</div>
<div class="col-xs-4">Middle Div</div>
<div class="col-xs-4">Right Div</div>
<br style="clear: both;" />

let Bootstrap figure out the percentages. I like to clear both, just in case.

John Grabauskas
  • 310
  • 2
  • 5
5

I prefer this method, floats are poorly supported in older versions of IE (really?...)

.column-left{ position:absolute; left: 0px; width: 33.3%; background: red; }
.column-right{position:absolute; left:66.6%; width: 33.3%; background: green; }
.column-center{ position:absolute; left:33.3%; width: 33.3%; background: yellow; }

UPDATED : Of course, to use this technique and due to the absolute positioning you need to enclose the divs on a container and do a postprocessing to define the height of if, something like this: 

jQuery(document).ready(function(){ 
    jQuery('.main').height( Math.max (
        jQuery('.column-left').height(),
        jQuery('.column‌​-right').height(),
        jQuery('.column-center').height())
    ); 
});

Not the most amazing thing in the world, but at least doesn't break on older IEs.

Patel
  • 1,478
  • 1
  • 13
  • 24
jpbourbon
  • 151
  • 1
  • 5
  • Of course, to use this technique and due to the absolute positioning you need to enclose the divs on a container and do a postprocessing to define the height of if, something like this: – jpbourbon Aug 28 '14 at 13:50
  • jQuery(document).ready(function(){ jQuery('.main').height(Math.max(jQuery('.column-left').height(),jQuery('.column-right').height(),jQuery('.column-center').height())); }); Not the most amazing thing in the world, but at least doesn't break on older IEs. – jpbourbon Aug 28 '14 at 13:51
4

But does it work in Chrome?

Float each div and set clear;both for the row. No need to set widths if you dont want to. Works in Chrome 41,Firefox 37, IE 11

Click for JS Fiddle

HTML

<div class="stack">
    <div class="row">
        <div class="col">
            One
        </div>
        <div class="col">
            Two
        </div>
    </div>
        <div class="row">
        <div class="col">
            One
        </div>
        <div class="col">
            Two
        </div>
                    <div class="col">
            Three
        </div>
    </div>
</div>

CSS

.stack .row { 
clear:both;

}
.stack .row  .col    {
    float:left;
      border:1px solid;

}
AndrewD
  • 4,924
  • 3
  • 30
  • 32
3

Here's how I managed to do something similar to this inside a <footer> element:

<div class="content-wrapper">

    <div style="float:left">
        <p>&copy; 2012 - @DateTime.Now.Year @Localization.ClientName</p>
    </div>

    <div style="float:right">
        <p>@Localization.DevelopedBy <a href="http://leniel.net" target="_blank">Leniel Macaferi</a></p>
    </div>

    <div style="text-align:center;">
        <p>☎ (24) 3347-3110 | (24) 8119-1085&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;✉ @Html.ActionLink(Localization.Contact, MVC.Home.ActionNames.Contact, MVC.Home.Name)</p>
    </div>

</div>

CSS:

.content-wrapper
{
    margin: 0 auto;
    max-width: 1216px;
}
Leniel Maccaferri
  • 100,159
  • 46
  • 371
  • 480
2

@Leniel this method is good but you need to add width to all the floating div's. I would say make them equal width or assign fixed width. Something like

.content-wrapper > div { width:33.3%; }

you may assign class names to each div rather than adding inline style, which is not a good practice.

Be sure to use a clearfix div or clear div to avoid following content remains below these div's.

You can find details of how to use clearfix div here

Bhavesh Odedra
  • 10,990
  • 12
  • 33
  • 58
aquaaarian
  • 21
  • 3
0

display: table;
If text needs to appear
as if on the same line

In other words; if the vertical alignment of text in each <div> needs to be identical, one can attempt a modern retro throwback to yesteryear with the somewhat controversial table styling:

.container {display: table;}
div   {display: table-cell;}

This proved to be quite useful to format CSL-styled citations in Pandoc, as shown below:

div.csl-bib-body {}
div.csl-entry {
    margin-top: 1rem;
    display: table;
    }
div.csl-left-margin {
    display: table-cell;
    }
div.csl-right-inline {
    padding-left: 1ex;
    display: table-cell;
    }

The citation number div and the citation data div are now shown at the exact same height.

Serge Stroobandt
  • 28,495
  • 9
  • 107
  • 102