Two Divs on the same row and center align both of them

Question

I have two divs like this   lt div style  border 1px solid  000  float left  gt Div 1 lt  div gt   lt div style  border 1px solid red  float left  gt Div 2 lt  div gt    I want them to display on the same row  so I used float left    I want both of them to be at center of the page as well  so I tried to wrap them with another div like this   lt div style  width 100   margin 0px auto   gt     lt div style  border 1px solid  000  float left  gt Div 1 lt  div gt     lt div style  border 1px solid red  float left  gt Div 2 lt  div gt   lt  div gt    But it doesn t work  If I change the code to this   lt div style  width 100   margin-left 50   margin-right 50   gt     lt div style  border 1px solid  000  float left  gt Div 1 lt  div gt     lt div style  border 1px solid red  float left  gt Div 2 lt  div gt   lt  div gt    then it s going to the center  but the horizontal scrollbar is there and it seems like it s not really centered as well   Can you please kindly suggest to me how can I achieve this  Thanks   Edit  I want the inner div  Div 1 and Div 2  to be center align as well

User · Answer

I would vote against display  inline-block since its not supported across browsers  IE  lt  8 specifically    wrapper       width 500px     Adjust to a total width of both  left and  right        margin  0 auto     left       float  left      width  49      Not 50  because of 1px border         border  1px solid  000     right       float  right      width  49      Not 50  because of 1px border         border  1px solid  F00      lt div class  wrapper  gt       lt div class  left  gt Div 1 lt  div gt       lt div class  right  gt Div 2 lt  div gt   lt  div gt    EDIT  If no spacing between the cells is desired just change both  left and  right to use float  left

User · Answer

both floated divs need to have a width   set 50  of width to both and it works   BTW  the outer div  with its margin  0 auto will only center itself not the ones inside

User · Answer

Align to the center  using display  inline-block and text-align  center    x000D   x000D   outerdiv x000D    x000D      height 100px  x000D      width 500px  x000D      background  red  x000D      margin  0 auto  x000D      text-align  center  x000D    x000D   x000D   innerdiv x000D    x000D      height 40px  x000D      width  100px  x000D      margin  2px  x000D      box-sizing  border-box  x000D      background  green  x000D      display  inline-block  x000D    x000D   lt div class  outerdiv  gt  x000D       lt div class  innerdiv  gt  lt  div gt  x000D       lt div class  innerdiv  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Align to the center using display  flex and justify-content  center   x000D   x000D   outerdiv x000D    x000D      height 100px  x000D      width 500px  x000D      background  red  x000D      display  flex  x000D      flex-direction  row  x000D      justify-content  center  x000D    x000D   x000D   innerdiv x000D    x000D      height 40px  x000D      width  100px  x000D      margin  2px  x000D      box-sizing  border-box  x000D      background  green  x000D    x000D   lt div class  outerdiv  gt  x000D       lt div class  innerdiv  gt  lt  div gt  x000D       lt div class  innerdiv  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Align to the center vertically and horizontally using display  flex  justify-content  center and align-items center    x000D   x000D   outerdiv x000D    x000D      height 100px  x000D      width 500px  x000D      background  red  x000D      display  flex  x000D      flex-direction  row  x000D      justify-content  center  x000D      align-items center  x000D    x000D   x000D   innerdiv x000D    x000D      height 40px  x000D      width  100px  x000D      margin  2px  x000D      box-sizing  border-box  x000D      background  green  x000D    x000D   lt div class  outerdiv  gt  x000D       lt div class  innerdiv  gt  lt  div gt  x000D       lt div class  innerdiv  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Better way till now    If you give display inline-block  to inner divs then child elements of inner divs will also get this property and disturb alignment of inner divs  Better way is to use two different classes for inner divs with width  margin and float    Best way till now   Use flexbox   http   css-tricks com snippets css a-guide-to-flexbox

User · Answer

Please take a look on flex it will help you make things right   on the main div set css display  flex  the div s that inside set css  flex 1 1 auto   attached jsfiddle link as example enjoy     https   jsfiddle net hodca v1uLsxbg

User · Answer

You could do this   lt div style  text-align center   gt       lt div style  border 1px solid  000  display inline-block   gt Div 1 lt  div gt       lt div style  border 1px solid red  display inline-block   gt Div 2 lt  div gt   lt  div gt      http   jsfiddle net jasongennaro MZrym    wrap it in a div with text-align center  give the innder divs a display inline-block  instead of a float   Best also to put that css in a stylesheet

User · Answer

Could this do for you  Check my JSFiddle  And the code   HTML   lt div class  container  gt       lt div class  div1  gt Div 1 lt  div gt       lt div class  div2  gt Div 2 lt  div gt   lt  div gt    CSS  div container       background-color   FF0000      margin  auto         width  304px     div div1       border  1px solid  000      float  left      width  150px     div div2       border  1px solid red      float  left      width  150px

[css] Two Divs on the same row and center align both of them

Examples related to css

Examples related to html

Examples related to center