How to align 3 divs (left/center/right) inside another div?

Question

I want to have 3 divs aligned inside a container div, something like this:

[[LEFT]       [CENTER]        [RIGHT]]

Container div is 100% wide (no set width), and center div should remain in center after resizing the container.

So I set:

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

But it becomes:

[[LEFT]       [CENTER]              ]
                              [RIGHT]

Any tips?

If the container becomes narrower than 300px wide, that's going to happen unless you set the overflow property. — brettkelly, Apr 08 '10 at 21:59
Just to note - As per @inkedmn's comment, with a bunch of content in each column I couldn't get them all to align properly at any container width without `overflow: hidden;` on the `center` column. Then in media query for small devices when I had all 3 columns center on the page on top of each other, I needed `overflow: hidden;` on the middle row (which was the right column on large devices) otherwise it had no height and wasn't centered vertically between the top and bottom row. — MilkyTech, May 24 '20 at 02:56

dkamins · Accepted Answer · 2013-01-13T04:23:30.633

399

With that CSS, put your divs like so (floats first):

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

P.S. You could also float right, then left, then center. The important thing is that the floats come before the "main" center section.

P.P.S. You often want last inside #container this snippet: <div style="clear:both;"></div> which will extend #container vertically to contain both side floats instead of taking its height only from #center and possibly allowing the sides to protrude out the bottom.

edited Jan 13 '13 at 04:23

answered Apr 08 '10 at 21:52

dkamins

21,450
7
55
59

how would you do it if the container wasn't 100%? Im trying something like that here, I would like the div do stay in the right of the container, but it floats to the right of the page – Tiago Nov 09 '10 at 22:50
1

@Tiago: The floats should remain constrained to the div if they're inside of it. Check what the width of container is by setting it to `border:solid`. If it's 100% then enclose it into another div to position it inside your page. – James P. Jul 15 '11 at 11:59
Also - If you are putting these inside a resizable container, make sure to set a min-width of the container to keep the right-floated div from getting pushed down. – Tapefreak Nov 09 '12 at 19:28
I'm not sure how putting the floats first actually fix this? Really, they should all be consided: `display: inline-block;` along with a `clear: both;` – Eric Wanchic May 26 '14 at 19:52
check [another](http://stackoverflow.com/questions/2637696/how-to-place-div-side-by-side) option, hope helps . – Shaiju T May 11 '15 at 16:25
11

This answer is more than six years old. In 2016, the correct answer is flexbox. – Aug 20 '16 at 04:48
1

@torazaburo, maybe there are more than one correct answer, there are many ways to reach the same point, in this case, i must to use this solution because a framework that i use, already sets left and right with float to elements, just adding center element at the end is perfect for me. – Ninja Coding Sep 06 '17 at 23:19

score 180 · Answer 2 · edited May 23 '17 at 11:47

Aligning Three Divs Horizontally Using Flexbox

Here is a CSS3 method for aligning divs horizontally inside another div.

#container {
  display: flex;                  /* establish flex container */
  flex-direction: row;            /* default value; can be omitted */
  flex-wrap: nowrap;              /* default value; can be omitted */
  justify-content: space-between; /* switched from default (flex-start, see below) */
  background-color: lightyellow;
}
#container > div {
  width: 100px;
  height: 100px;
  border: 2px dashed red;
}

<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>

jsFiddle

The justify-content property takes five values:

flex-start (default)
flex-end
center
space-between
space-around

In all cases, the three divs are on the same line. For a description of each value see: https://stackoverflow.com/a/33856609/3597276

Benefits of flexbox:

minimal code; very efficient
centering, both vertically and horizontally, is simple and easy
equal height columns are simple and easy
multiple options for aligning flex elements
it's responsive
unlike floats and tables, which offer limited layout capacity because they were never intended for building layouts, flexbox is a modern (CSS3) technique with a broad range of options.

To learn more about flexbox visit:

Methods for Aligning Flex Items
Using CSS flexible boxes ~ MDN
A Complete Guide to Flexbox ~ CSS-Tricks
What the Flexbox?! ~ YouTube video tutorial

Browser support: Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.

Great explanation in here and in the linked posts! **A sidenote :** Using "span" elements as flex items inside the container div worked in firefox but did not work in a javafx based browser (webview). Changing the "spans" to "divs" worked in both. — Ashok, Jul 26 '16 at 06:00
This unfortunately only works with same-width items. Also see https://stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties — handle, Mar 07 '20 at 11:18

score 141 · Answer 3 · edited Jan 11 '13 at 00:52

141

If you do not want to change your HTML structure you can also do by adding text-align: center; to the wrapper element and a display: inline-block; to the centered element.

#container {
    width:100%;
    text-align:center;
}

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

#center {
    display: inline-block;
    margin:0 auto;
    width:100px;
}

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

Live Demo: http://jsfiddle.net/CH9K8/

edited Jan 11 '13 at 00:52

Extra Savoir-Faire

6,026
4
29
47

answered Jan 11 '13 at 00:35

fruechtemuesli

2,809
3
17
15

1

This is the only solution that resizes properly with the window width without folding too soon. – Jared Sealey Oct 28 '13 at 18:23
5

It's perfect when Left and Right sizes are equal. Otherwise the Center is not centered. – mortalis Dec 26 '17 at 09:48

score 23 · Answer 4 · edited Sep 27 '18 at 14:15

Float property is actually not used to align the text.

This property is used to add element to either right or left or center.

div > div { border: 1px solid black;}

<html>
     <div>
         <div style="float:left">First</div>
         <div style="float:left">Second</div>
         <div style="float:left">Third</div>

         <div style="float:right">First</div>
         <div style="float:right">Second</div>
         <div style="float:right">Third</div>
     </div>
</html>

for float:left output will be [First][second][Third]

for float:right output will be [Third][Second][First]

That means float => left property will add your next element to left of previous one, Same case with right

Also you have to Consider the width of parent element, if the sum of widths of child elements exceed the width of parent element then the next element will be added at next line

 <html>
     <div style="width:100%">
       <div style="float:left;width:50%">First</div>
       <div style="float:left;width:50%">Second</div>
       <div style="float:left;width:50%">Third</div>
     </div>
</html>

[First] [Second]

[Third]

So you need to Consider All these aspect to get the perfect result

score 16 · Answer 5 · edited Mar 20 '18 at 22:18

There are several tricks available for aligning the elements.

01. Using Table Trick

.container{
  display:table;
 }

.left{
  background:green;
  display:table-cell;
  width:33.33vw;
}

.center{
  background:gold;
  display:table-cell;
  width:33.33vw;
}

.right{
  background:gray;
  display:table-cell;
  width:33.33vw;
}

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

02. Using Flex Trick

.container{
  display:flex;
  justify-content: center;
  align-items: center;
   }

.left{
  background:green;
  width:33.33vw;
}

.center{
  background:gold;
   width:33.33vw;
}

.right{
  background:gray;
   width:33.33vw;
}

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

03. Using Float Trick

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

.center{
   background:gold;
   width:100px;
   float:left;
}

.right{
   background:gray;
   width:100px;
   float:left;
}

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

Eric Wanchic · Answer 6 · 2014-05-26T20:01:25.780

I like my bars tight and dynamic. This is for CSS 3 & HTML 5

First, setting the Width to 100px is limiting. Don't do it.
Second, setting the container's width to 100% will work ok, until were talking about it being a header/footer bar for the whole app, like a navigation or credits/copyright bar. Use right: 0; instead for that scenario.
You are using id's (hash #container, #left, etc) instead of classes (.container, .left, etc), which is fine, unless you want to repeat your style pattern elsewhere in your code. I'd consider using classes instead.
For HTML, no need to swap order for: left, center, & right. display: inline-block; fixes this, returning your code to something cleaner and logically in order again.
Lastly, you need to clear the floats all up so that it doesn't mess with future <div>. You do this with the clear: both;

To summarize:

HTML:

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
  <div class="clear"></div>
</div>

CSS:

.container {right: 0; text-align: center;}

.container .left, .container .center, .container .right { display: inline-block; }

.container .left { float: left; }
.container .center { margin: 0 auto; }
.container .right { float: right; }
.clear { clear: both; }

Bonus point if using HAML and SASS ;)

HAML:

.container
  .left
  .center
  .right
  .clear

SASS:

.container {
  right: 0;
  text-align: center;

  .left, .center, .right { display: inline-block; }

  .left { float: left; }
  .center { margin: 0 auto; }
  .right { float: right; }
  .clear { clear: both; }
}

score 11 · Answer 7 · answered Aug 15 '15 at 02:35

This can be easily done using the CSS3 Flexbox, a feature which will be used in the future(When <IE9 is completely dead) by almost every browser.

Check the Browser Compatibility Table

HTML

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

CSS

.container {
  display: flex;
  flex-flow: row nowrap; /* Align on the same line */
  justify-content: space-between; /* Equal margin between the child elements */
}

Output:

.container {
  display: flex;
  flex-flow: row nowrap; /* Align on the same line */
  justify-content: space-between; /* Equal margin between the child elements */
}

/* For Presentation, not needed */

.container > div {
  background: #5F85DB;
  padding: 5px;
  color: #fff;
  font-weight: bold;
  font-family: Tahoma;
}

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

score 4 · Answer 8 · answered May 11 '15 at 09:05

4

With twitter bootstrap :

<p class="pull-left">Left aligned text.</p>
<p class="pull-right">Right aligned text.</p>
<p class="text-center">Center aligned text.</p>

answered May 11 '15 at 09:05

Ka.

1,189
1
12
18

score 3 · Answer 9 · answered Oct 23 '16 at 17:03

possible answer, if you want to keep the order of the html and not use flex.

HTML

<div class="a">
  <div class="c">
    the 
  </div>
  <div class="c e">
    jai ho 
  </div>
  <div class="c d">
    watsup
  </div>
</div>

CSS

.a {
  width: 500px;
  margin: 0 auto;
  border: 1px solid red;
  position: relative;
  display: table;
}

.c {
  display: table-cell;
  width:33%;
}

.d {
  text-align: right;
}

.e {
  position: absolute;
  left: 50%;
  display: inline;
  width: auto;
  transform: translateX(-50%);
}

Code Pen Link

score 3 · Answer 10 · answered May 13 '21 at 08:20

CSS grid can do the job easily:

#container {
  display: grid;                   /* (1) a grid container */
  grid-auto-flow:column;           /* (2) column layout    */
  justify-content: space-between;  /* (3) align the columns*/
  background-color: lightyellow;
}
#container > div {
  width: 100px;
  height: 100px;
  border: 2px dashed red;
}

<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>

score 2 · Answer 11 · answered Aug 15 '15 at 09:17

2

HTML:

<div id="container" class="blog-pager">
   <div id="left">Left</div>
   <div id="right">Right</div>
   <div id="center">Center</div>    
</div>

CSS:

 #container{width:98%; }
 #left{float:left;}
 #center{text-align:center;}
 #right{float:right;}

text-align:center; gives perfect centre align.

JSFiddle Demo

answered Aug 15 '15 at 09:17

Khalid Farhan

435
1
3
19

1

It only centers the div in your example because the text elements have nearly the same size, make one text longer and the #center div is not in the center anymore: https://jsfiddle.net/3a4Lx239/ – Avatar Jul 11 '16 at 12:17

Shane Hussain Naqvi · Answer 12 · 2021-06-10T18:17:55.753

I did another attempt to simplify this and achieve it without the necessity of a container.

HTML

<div class="box1">left side of the page</div>
<div class="box2">right side of the page</div>
<div class="box3">center of the page </div>

CSS

      .box1 {
      background-color: #ff0000;
      width: 200px;
      float: left;
    }
    
    .box2 {
      background-color: #00ff00;
      width: 200px;
      float: right;
    }
    
    .box3 {
      background-color: #0fffff;
      width: 200px;
      margin: 0 auto;
    }

You can see it live at JSFiddle

score 1 · Answer 13 · answered Dec 26 '17 at 12:34

Using Bootstrap 3 I create 3 divs of equal width (in 12 column layout 4 columns for each div). This way you can keep your central zone centered even if left/right sections have different widths (if they don't overflow their columns' space).

HTML:

<div id="container">
  <div id="left" class="col col-xs-4 text-left">Left</div>
  <div id="center" class="col col-xs-4 text-center">Center</div>
  <div id="right" class="col col-xs-4 text-right">Right</div>
</div>

CSS:

#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  border: 1px solid #07f;
  padding: 0;
}

CodePen

To create that structure without libraries I copied some rules from Bootstrap CSS.

HTML:

<div id="container">
  <div id="left" class="col">Left</div>
  <div id="center" class="col">Center</div>
  <div id="right" class="col">Right</div>
</div>

CSS:

* {
  box-sizing: border-box;
}
#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  float: left;
  width: 33.33333333%;
  border: 1px solid #07f;
  padding: 0;
}
#left {
  text-align: left;
}
#center {
  text-align: center;
}
#right {
  text-align: right;
}

CopePen

score 1 · Answer 14 · answered Oct 27 '21 at 15:17

If the left, center, and right DIVs have different widths, you can accomplish this as follows:

  #container {
    position: relative;
    width: 100%;
    text-align: center;
  }

  #left {
    position: absolute;
    left: 0px;
  }

  #right {
    position: absolute;
    right: 0px;
  }

  #center {
    display: inline-block;
  }

If your center DIV is text, you don't need the #center CSS.

Dirk Diggler · Answer 15 · 2022-05-13T22:22:43.630

Use CSS Grid

layout {
    display: grid;
    grid-template-columns: repeat(3,1fr);
}
start-column {
    justify-self: start;
}
center-column {
    justify-self: center;
}
end-column {
    justify-self: end;
}

<layout>
    <start-column>
        <button>Start</button>
    </start-column>
    <center-column>
        <p>Center Donec non urna ipsum. Nullam euismod, lacus ac malesuada varius, mauris erat ullamcorper erat, eget dignissim tortor felis et sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi faucibus turpis et augue dapibus bibendum.</p>
    </center-column>
    <end-column>
        <a href="#">End</a>
    </end-column>
</layout>

score 0 · Answer 16 · answered May 27 '13 at 02:25

Here are the changes that I had to make to the accepted answer when I did this with an image as the centre element:

Make sure the image is enclosed within a div (#center in this case). If it isn't, you'll have to set display to block, and it seems to centre relative to the space between the floated elements.

Make sure to set the size of both the image and its container:

#center {
    margin: 0 auto;
}

#center, #center > img {
    width: 100px;
    height: auto;
}

score 0 · Answer 17 · answered Jun 04 '16 at 07:32

You can try this:

Your html code like this:

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

and your css code like this:

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

so, it's output should be get like this:

[[LEFT]       [CENTER]        [RIGHT]]

score -1 · Answer 18 · edited Dec 24 '16 at 21:36

-1

.processList
  text-align: center
  li
  .leftProcess
    float: left
  .centerProcess
    float: none
    display: inline-block
  .rightProcess
    float: right

html
ul.processList.clearfix
  li.leftProcess

li.centerProcess
li.rightProcess

edited Dec 24 '16 at 21:36

SmokeDetector

751
2
8
12

answered Jun 30 '16 at 14:00

shubham

11

2

Welcome to Stack Overflow! Please add some explanation of why this code helps the OP. This will help provide an answer future viewers can learn from. See [answer] for more information. – Heretic Monkey Jun 30 '16 at 19:52

score -3 · Answer 19 · answered Aug 05 '14 at 15:07

-3

You've done it correctly, you only need to clear your floats. Simply add

overflow: auto;

to your container class.

answered Aug 05 '14 at 15:07

Mustapha ZEGAOULA

1

score -7 · Answer 20 · edited Feb 12 '15 at 12:18

The easiest solution is to crate a table with 3 columns and center that table.

html:

 <div id="cont">
        <table class="aa">
            <tr>
                <td>
                    <div id="left">
                        <h3 class="hh">Content1</h3>
                        </div>
                    </td>
                <td>
                    <div id="center">
                        <h3 class="hh">Content2</h3>
                        </div>
                 </td>
                <td>
                    <div id="right"><h3 class="hh">Content3</h3>
                        </div>
                </td>
            </tr>
        </table>
    </div>

css:

#cont 
{
  margin: 0px auto;    
  padding: 10px 10px;
}

#left
{    
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

#center
{
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

#right
{
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

score -10 · Answer 21 · edited Oct 23 '11 at 20:17

-10

#warpcontainer  {width:800px; height:auto; border: 1px solid #000; float:left; }
#warpcontainer2 {width:260px; height:auto; border: 1px solid #000; float:left; clear:both; margin-top:10px }

edited Oct 23 '11 at 20:17

Michael Petrotta

59,888
27
145
179

answered Oct 22 '11 at 01:48

bytes

3

2

Rather than only post a block of code, please *explain* why this code solves the problem posed. Without an explanation, this is not an answer. – Martijn Pieters Nov 08 '12 at 21:59

How to align 3 divs (left/center/right) inside another div?

21 Answers21

Aligning Three Divs Horizontally Using Flexbox

jsFiddle

Linked

Related