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

User · Answer

Aligning Three Divs Horizontally Using Flexbox

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

_x000D_

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

_x000D_

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

_x000D_

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.

User · Answer

You can try this   Your html code like this    lt div id  container  gt     lt div id  left  gt  lt  div gt     lt div id  right  gt  lt  div gt     lt div id  center  gt  lt  div gt   lt  div gt    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

User · Answer

I like my bars tight and dynamic  This is for CSS 3  amp  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   amp  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  lt div gt   You do this with the clear  both    To summarize   HTML    lt div class  container  gt     lt div class  left  gt  lt  div gt     lt div class  center  gt  lt  div gt     lt div class  right  gt  lt  div gt     lt div class  clear  gt  lt  div gt   lt  div gt    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

User · Answer

HTML    lt div id  container  class  blog-pager  gt      lt div id  left  gt Left lt  div gt      lt div id  right  gt Right lt  div gt      lt div id  center  gt Center lt  div gt       lt  div gt    CSS     container width 98       left float left     center text-align center     right float right     text-align center  gives perfect centre align   JSFiddle Demo

User · Answer

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

User · Answer

possible answer  if you want to keep the order of the html and not use flex   HTML   lt div class  a  gt     lt div class  c  gt      the     lt  div gt     lt div class  c e  gt      jai ho     lt  div gt     lt div class  c d  gt      watsup    lt  div gt   lt  div gt    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

User · Answer

This can be easily done using the CSS3 Flexbox  a feature which will be used in the future When  lt IE9 is completely dead  by almost every browser   Check the Browser Compatibility Table  HTML   lt div class  container  gt     lt div class  left  gt      Left    lt  div gt     lt div class  center  gt      Center    lt  div gt     lt div class  right  gt      Right    lt  div gt   lt  div gt    CSS   container     display  flex    flex-flow  row nowrap     Align on the same line      justify-content  space-between     Equal margin between the child elements        Output   x000D   x000D   container   x000D    display  flex  x000D    flex-flow  row nowrap     Align on the same line    x000D    justify-content  space-between     Equal margin between the child elements    x000D    x000D   x000D     For Presentation  not needed    x000D   x000D   container  gt  div   x000D    background   5F85DB  x000D    padding  5px  x000D    color   fff  x000D    font-weight  bold  x000D    font-family  Tahoma  x000D    x000D   lt div class  container  gt  x000D     lt div class  left  gt  x000D      Left x000D     lt  div gt  x000D     lt div class  center  gt  x000D      Center x000D     lt  div gt  x000D     lt div class  right  gt  x000D      Right x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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    lt div id  container  gt     lt div id  left  class  col col-xs-4 text-left  gt Left lt  div gt     lt div id  center  class  col col-xs-4 text-center  gt Center lt  div gt     lt div id  right  class  col col-xs-4 text-right  gt Right lt  div gt   lt  div gt    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    lt div id  container  gt     lt div id  left  class  col  gt Left lt  div gt     lt div id  center  class  col  gt Center lt  div gt     lt div id  right  class  col  gt Right lt  div gt   lt  div gt    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

User · Answer

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

User · Answer

You ve done it correctly  you only need to clear your floats   Simply add    overflow  auto     to your container class

User · Answer

Float property is actually not used to align the text   This property is used to add element to either right or left or center       x000D   x000D  div  gt  div   border  1px solid black   x000D   lt html gt  x000D        lt div gt  x000D            lt div style  float left  gt First lt  div gt  x000D            lt div style  float left  gt Second lt  div gt  x000D            lt div style  float left  gt Third lt  div gt  x000D   x000D            lt div style  float right  gt First lt  div gt  x000D            lt div style  float right  gt Second lt  div gt  x000D            lt div style  float right  gt Third lt  div gt  x000D        lt  div gt  x000D   lt  html gt  x000D   x000D   x000D    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   x000D   x000D    lt html gt  x000D        lt div style  width 100   gt  x000D          lt div style  float left width 50   gt First lt  div gt  x000D          lt div style  float left width 50   gt Second lt  div gt  x000D          lt div style  float left width 50   gt Third lt  div gt  x000D        lt  div gt  x000D   lt  html gt  x000D   x000D   x000D     First        Second    Third   So you need to Consider All these aspect to get the perfect result

User · Answer

There are several tricks available for aligning the elements   01  Using Table Trick   x000D   x000D   container  x000D    display table  x000D     x000D   x000D   left  x000D    background green  x000D    display table-cell  x000D    width 33 33vw  x000D    x000D   x000D   center  x000D    background gold  x000D    display table-cell  x000D    width 33 33vw  x000D    x000D   x000D   right  x000D    background gray  x000D    display table-cell  x000D    width 33 33vw  x000D    x000D   lt div class  container  gt  x000D     lt div class  left  gt  x000D      Left x000D     lt  div gt  x000D     lt div class  center  gt  x000D      Center x000D     lt  div gt  x000D     lt div class  right  gt  x000D      Right x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    02  Using Flex Trick   x000D   x000D   container  x000D    display flex  x000D    justify-content  center  x000D    align-items  center  x000D       x000D   x000D   left  x000D    background green  x000D    width 33 33vw  x000D    x000D   x000D   center  x000D    background gold  x000D     width 33 33vw  x000D    x000D   x000D   right  x000D    background gray  x000D     width 33 33vw  x000D    x000D   lt div class  container  gt  x000D     lt div class  left  gt  x000D      Left x000D     lt  div gt  x000D     lt div class  center  gt  x000D      Center x000D     lt  div gt  x000D     lt div class  right  gt  x000D      Right x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    03  Using Float Trick   x000D   x000D   left  x000D    background green  x000D    width 100px  x000D    float left  x000D    x000D   x000D   center  x000D     background gold  x000D     width 100px  x000D     float left  x000D    x000D   x000D   right  x000D     background gray  x000D     width 100px  x000D     float left  x000D    x000D   lt div class  container  gt  x000D     lt div class  left  gt  x000D      Left x000D     lt  div gt  x000D     lt div class  center  gt  x000D      Center x000D     lt  div gt  x000D     lt div class  right  gt  x000D      Right x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

The easiest solution is to crate a table with 3 columns and center that table   html     lt div id  cont  gt           lt table class  aa  gt               lt tr gt                   lt td gt                       lt div id  left  gt                           lt h3 class  hh  gt Content1 lt  h3 gt                           lt  div gt                       lt  td gt                   lt td gt                       lt div id  center  gt                           lt h3 class  hh  gt Content2 lt  h3 gt                           lt  div gt                    lt  td gt                   lt td gt                       lt div id  right  gt  lt h3 class  hh  gt Content3 lt  h3 gt                           lt  div gt                   lt  td gt               lt  tr gt           lt  table gt       lt  div gt    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

User · Answer

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

User · Answer

I did another attempt to simplify this and achieve it without the necessity of a container   HTML    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      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

User · Answer

With that CSS  put your divs like so  floats first     lt div id  container  gt     lt div id  left  gt  lt  div gt     lt div id  right  gt  lt  div gt     lt div id  center  gt  lt  div gt   lt  div gt    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   lt div style  clear both   gt  lt  div gt  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

User · Answer

With twitter bootstrap      lt p class  pull-left  gt Left aligned text  lt  p gt   lt p class  pull-right  gt Right aligned text  lt  p gt   lt p class  text-center  gt Center aligned text  lt  p gt

User · Answer

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  gt  img       width  100px      height  auto

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

Aligning Three Divs Horizontally Using Flexbox

jsFiddle

Examples related to html

Examples related to css

Examples related to flexbox

Examples related to alignment

Examples related to css-float