HTML/CSS: How to center floating divs?

Question

I have this HTML:

<div id="container">
    <div id="boxContainer">
        <div id="box1">
            <span>Text1</span>
        </div>
        <div id="box2">
            <span>Text2</span>
        </div>
        <div style="clear:both;"></div>
    </div>
</div>

and the following CSS:

#container {
    width:100%;
    background-color:yellow;
}

#boxContainer {
    margin: 0px auto;
    background-color:black;
}

#box1 {
    float: left;
    background-color:blue
}

#box2 {
    float: left;
    background-color:red
}

I expect the #boxContainer's width to match the sum of width of #box1 and #box2, but it is 100% and therefore it is not centered in the #container. Why?

I have this fiddle showing the issue: http://jsfiddle.net/dennismadsen/dxbfpbg1/

possible duplicate of [How do I center float elements?](http://stackoverflow.com/questions/4767971/how-do-i-center-float-elements) — Brewal, Nov 20 '14 at 16:19

score 6 · Accepted Answer · answered Nov 20 '14 at 16:07

Block-level elements that are not floated (like your #boxContainer div) will default to 100% width. You can change it to display: inline-block to only take up the space that it needs. You can then center it with text-align: center on its parent element.

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

#boxContainer {
    display: inline-block;
    margin: 0px auto;
    background-color:black;
}

#box1 {
    float: left;
    background-color:blue
}

#box2 {
    float: left;
    background-color:red
}

Updated fiddle: http://jsfiddle.net/dxbfpbg1/2/

You have space under the two divs – Brewal Nov 20 '14 at 16:11 — Brewal, Nov 20 '14 at 16:11

Alex Char · Answer 2 · 2014-11-20T16:18:28.803

Because you use floats. One solution is to use display: inline-block and set text-align: center to the container:

#container {
  width: 100%;
  background-color: yellow
}
#boxContainer {
  text-align: center;
  background-color: black;
}
#box1 {
  display: inline-block;
  background-color: blue
}
#box2 {
  display: inline-block;
  background-color: red
}

<br/>
<br/>
<div id="container">
  <div id="boxContainer">
    <div id="box1">
      <span>Text1</span>
    </div>
    <div id="box2">
      <span>Text2</span>
    </div>
    <div style="clear:both;"></div>
  </div>
</div>

Also to remove space you can set font-size: 0 to parent container and set font-size: Xpx to child elements like:

#container {
  width: 100%;
  background-color: yellow;
  font-size: 0;
}
#boxContainer {
  text-align: center;
  background-color: black;
}
#box1 {
  display: inline-block;
  background-color: blue;
  font-size: 16px;
}
#box2 {
  display: inline-block;
  background-color: red;
  font-size: 16px;
}

<br/>
<br/>
<div id="container">
  <div id="boxContainer">
    <div id="box1"> <span>Text1</span>

    </div>
    <div id="box2"> <span>Text2</span>

    </div>
    <div style="clear:both;"></div>
  </div>
</div>

Beat you by about 15 seconds :) – Steve Sanders Nov 20 '14 at 16:07 — Steve Sanders, Nov 20 '14 at 16:07

0b10011 · Answer 3 · 2014-11-20T16:38:58.570

`display: table`

You could use display: table and display: table-cell (browser support) instead of float to achieve the result you're looking for. This has the benefit of not requiring any use of clear or having to use hacks to get rid of the space below #box1 and #box2.

#container {
  background-color: yellow
}
#boxContainer {
  display: table;
  margin: 0px auto;
  background-color: black;
}
#box1 {
  display: table-cell;
  background-color: blue
}
#box2 {
  display: table-cell;
  background-color: red
}

<div id="container">
  <div id="boxContainer">
    <div id="box1">
      <span>Text1</span>
    </div>
    <div id="box2">
      <span>Text2</span>
    </div>
  </div>
</div>

`display: inline-flex`

display: table has the downside of forcing #box1 and #box2 into columns, however. So, another option you have available is display: inline-flex (browser support). This allows for wrapping #box2 onto the next line when #box1 is wide enough, however, it is also lacking the browser support that display: table has.

#container {
  background-color: yellow;
  text-align: center;
}
#boxContainer {
  display: inline-flex;
  flex-wrap: wrap;
  text-align: left;
  background-color: black;
}
#box1 {
  background-color: blue
}
#box2 {
  background-color: red
}

<div id="container">
  <div id="boxContainer">
    <div id="box1">
      <span>Text1</span>
    </div>
    <div id="box2">
      <span>Text2</span>
    </div>
  </div>
</div>

HTML/CSS: How to center floating divs?

3 Answers3

display: table

display: inline-flex

`display: table`

`display: inline-flex`