How to float 3 divs side by side using CSS?

CssCss Float

Css Problem Overview

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?

Css Solutions

Solution 1 - Css

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>

Solution 2 - Css

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>

Solution 3 - Css

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>

Solution 4 - Css

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

Solution 5 - Css

<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!! :)

Solution 6 - Css

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

Solution 7 - Css

<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

Solution 8 - Css

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>

Solution 9 - Css

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

Solution 10 - Css

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>

Solution 11 - Css

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.

Solution 12 - Css

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.

Solution 13 - Css

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

}

Solution 14 - Css

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

Solution 15 - Css

@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

Solution 16 - Css

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.

Categories
Recommended Css Solutions
Recommended Css Float Solutions

Previous Solution:

How to get Spinner value?

AndroidSpinner

Next Solution:

How to stop line breaking in vim

Vim

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionDameonView Question on Stackoverflow
Solution 1 - CssNick CraverView Answer on Stackoverflow
Solution 2 - CssStickersView Answer on Stackoverflow
Solution 3 - CssSarfrazView Answer on Stackoverflow
Solution 4 - CssdavidosomethingView Answer on Stackoverflow
Solution 5 - CssMigishaView Answer on Stackoverflow
Solution 6 - CssArwenView Answer on Stackoverflow
Solution 7 - CssSugaComaView Answer on Stackoverflow
Solution 8 - CssNick TraversView Answer on Stackoverflow
Solution 9 - CssDaniel A. WhiteView Answer on Stackoverflow
Solution 10 - CssAnnView Answer on Stackoverflow
Solution 11 - CssJohn GrabauskasView Answer on Stackoverflow
Solution 12 - CssjpbourbonView Answer on Stackoverflow
Solution 13 - CssAndrewDView Answer on Stackoverflow
Solution 14 - CssLeniel MaccaferriView Answer on Stackoverflow
Solution 15 - CssaquaaarianView Answer on Stackoverflow
Solution 16 - CssSerge StroobandtView Answer on Stackoverflow