Centering floating divs within another div

Question

I ve searched other questions and  while this problem seems similar to a couple of others  nothing I ve seen so far seems to address the issue that I m having   I have a div which contains a number of other divs  each of which is floated left  These divs each contain a photo and a caption  All I want is for the group of photos to be centered within the containing div   As you can see from the code below  I ve tried using both overflow hidden and margin x auto on the parent divs  and I ve also added a clear both  as suggested in another topic  after the photos  Nothing seems to make a difference   Thank you  I appreciate any suggestions    lt div style  position  relative  margin  0 auto  overflow  hidden  text-align  center   gt       lt h4 gt Section Header lt  h4 gt        lt div style  margin  2em auto   gt            lt div style  float  left  margin  auto 1 5em   gt               lt img src  photo1 jpg    gt  lt br   gt               Photo Caption          lt  div gt           lt div style  float  left  margin  auto 1 5em   gt               lt img src  photo2 jpg    gt  lt br   gt               Photo Caption          lt  div gt           lt div style  float  left  margin  auto 1 5em   gt               lt img src  photo3 jpg    gt  lt br   gt               Photo Caption          lt  div gt            lt div style  clear  both  height  0  overflow  hidden   gt   lt  div gt        lt  div gt    lt  div gt

User · Answer

The following solution does not use inline blocks. However, it requires two helper divs:

The content is floated
The inner helper is floated (it stretches as much as the content)
The inner helper is pushed right 50% (its left aligns with center of outer helper)
The content is pulled left 50% (its center aligns with left of inner helper)
The outer helper is set to hide the overflow

_x000D_

.ca-outer {_x000D_
  overflow: hidden;_x000D_
  background: #FFC;_x000D_
}_x000D_
.ca-inner {_x000D_
  float: left;_x000D_
  position: relative;_x000D_
  left: 50%;_x000D_
  background: #FDD;_x000D_
}_x000D_
.content {_x000D_
  float: left;_x000D_
  position: relative;_x000D_
  left: -50%;_x000D_
  background: #080;_x000D_
}_x000D_
/* examples */_x000D_
div.content > div {_x000D_
  float: left;_x000D_
  margin: 10px;_x000D_
  width: 100px;_x000D_
  height: 100px;_x000D_
  background: #FFF;_x000D_
}_x000D_
ul.content {_x000D_
  padding: 0;_x000D_
  list-style-type: none;_x000D_
}_x000D_
ul.content > li {_x000D_
  margin: 10px;_x000D_
  background: #FFF;_x000D_
}

_x000D_

<div class="ca-outer">_x000D_
  <div class="ca-inner">_x000D_
    <div class="content">_x000D_
      <div>Box 1</div>_x000D_
      <div>Box 2</div>_x000D_
      <div>Box 3</div>_x000D_
    </div>_x000D_
  </div>_x000D_
</div>_x000D_
<hr>_x000D_
<div class="ca-outer">_x000D_
  <div class="ca-inner">_x000D_
    <ul class="content">_x000D_
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>_x000D_
      <li>Nullam efficitur nulla in libero consectetur dictum ac a sem.</li>_x000D_
      <li>Suspendisse iaculis risus ut dapibus cursus.</li>_x000D_
    </ul>_x000D_
  </div>_x000D_
</div>

_x000D_

User · Answer

First  remove the float attribute on the inner divs   Then  put text-align  center on the main outer div  And for the inner divs   use display  inline-block  Might also be wise to give them explicit widths too      lt div style  margin  auto 1 5em  display  inline-block   gt     lt img title  Nadia Bjorlin  alt  Nadia Bjorlin  src  headshot nadia png   gt     lt br  gt    Nadia Bjorlin  lt  div gt

User · Answer

I accomplished the above using relative positioning and floating to the right   HTML code    lt div class  clearfix  gt                                 lt div class  outer-div  gt           lt div class  inner-div  gt               lt div class  floating-div  gt Float 1 lt  div gt               lt div class  floating-div  gt Float 2 lt  div gt               lt div class  floating-div  gt Float 3 lt  div gt           lt  div gt       lt  div gt   lt  div gt    CSS    outer-div   position  relative  float  right  right  50      inner-div   position  relative  float  right  right  -50      floating-div   float  left  border  1px solid red  margin  0 1 5em      clearfix before   clearfix after   content       display  table     clearfix after   clear  both     clearfix    zoom  1      JSFiddle  http   jsfiddle net MJ9yp   This will work in IE8 and up  but not earlier  surprise  surprise    I do not recall the source of this method unfortunately  so I cannot give credit to the original author  If anybody else knows  please post the link

User · Answer

In my case  I could not get the answer by  Sampson to work for me  at best I got a single column centered on the page  In the process however  I learned how the float actually works and created this solution  At it s core the fix is very simple but hard to find as evident by this thread which has had more than 146k views at the time of this post without mention   All that is needed is to total the amount of screen space width that the desired layout will occupy then make the parent the same width and apply margin auto  That s it   The elements in the layout will dictate the width and height of the  outer  div  Take each  myFloat  or element s width or height   its borders   its margins and its paddings and add them all together  Then add the other elements together in the same fashion  This will give you the parent width  They can all be somewhat different sizes and you can do this with fewer or more elements   Ex  each element has 2 sides so border  margin and padding get multiplied x2   So an element that has a width of 10px  border 2px  margin 6px  padding 3px would look like this  10   4   12   6   32  Then add all of your element s totaled widths together   Element 1   32 Element 2   24 Element 3   32 Element 4   24   In this example the width for the  outer  div would be 112    x000D   x000D   outer   x000D       floats   margins   borders   270    x000D    max-width  270px  x000D    margin  auto  x000D    height  80px  x000D    border  1px  x000D    border-style  solid  x000D    x000D   x000D   myFloat   x000D         3 floats x 50px   150px    x000D      width  50px  x000D         6 margins x 10px   60    x000D      margin  10px  x000D         6 borders x 10px   60    x000D      border  10px solid  6B6B6B  x000D      float  left  x000D      text-align  center  x000D      height  40px  x000D    x000D   lt div class  outer  gt  x000D     lt div class  myFloat  gt Float 1 lt  div gt  x000D     lt div class  myFloat  gt Float 2 lt  div gt  x000D     lt div class  myFloat  gt Float 3 lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

display  inline-block  won t work in any of IE browsers  Here is what I used      change the width of  boxContainer to     1-2 pixels higher than total width of the boxes inside    boxContainer                width  800px       height  auto      text-align  center      margin-left  auto      margin-right  auto      Box      width  240px       height  90px      background-color   FFF      float  left      margin-left  10px      margin-right  10px

User · Answer

With Flexbox you can easily horizontally  and vertically  center floated children inside a div    So if you have simple markup like so    lt div class  wpr  gt       lt span gt  lt  span gt       lt span gt  lt  span gt       lt span gt  lt  span gt       lt span gt  lt  span gt       lt span gt  lt  span gt   lt  div gt    with CSS    wpr       width  400px      height  100px      background  pink      padding  10px 30px      wpr span       width  50px      height  50px      background  green      float  left       children floated left          margin  0 5px       This is the  expected - and undesirable  RESULT   Now add the following rules to the wrapper   display  flex  justify-content  center     align horizontal      and the floated children get aligned center  DEMO   Just for fun  to get vertical alignment as well just add   align-items  center     align vertical      DEMO

User · Answer

Solution    lt  DOCTYPE HTML gt   lt html gt       lt head gt           lt title gt Knowledge is Power lt  title gt           lt script src  js jquery js  gt  lt  script gt           lt script type  text javascript  gt           lt  script gt           lt style type  text css  gt               outer                   text-align center                  width 100                   height 200px                  background red                             inner                   display inline-block                  height 200px                  background yellow                         lt  style gt       lt  head gt       lt body gt           lt div id  outer  gt               lt div id  inner  gt Hello  I am Touhid Rahman  The man in Light lt  div gt           lt  div gt       lt  body gt   lt  html gt

[html] Centering floating divs within another div

Examples related to html

Examples related to center

Examples related to css