How to align three divs (left/center/right) in one div?

Question

I want to align 3 divs inside a container div, like this:

[[LEFT] [CENTER] [RIGHT]]

The width of the container div is 100% (no width is set), and the middle div should stay in the middle after resizing the container.

So I set:

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

But the result became:

[[LEFT] [CENTER] ]
                              [RIGHT]

Any suggestions?

Answer 1

Use Flexbox to align three divs horizontally

This is a CSS3 way to horizontally align a div within another div.

#container {
  display: flex;                  /* 建立flex容器 */
  flex-direction: row;            /* 默认值；可以省略 */
  flex-wrap: nowrap;              /* 默认值；可以省略 */
  justify-content: space-between; /* 从默认值（flex-start）切换 */
  background-color: lightyellow;
}
#container > div {
  width: 100px;
  height: 100px;
  border: 2px dashed red;
}

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

jsFiddle

justify-content attribute has 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:

1. Low amount of code, very efficient
2. Vertical and horizontal centering is very simple
3. Contour columns are very simple
4. Multiple options for aligning flex elements
5. Responsive
6. Unlike floats and tables, floats and tables have limited layout capabilities because they are never used to build layouts, Flexbox is a modern (CSS3) technology with a wide range of options.

---

Learn more about flexbox:

• Methods to align Flex items
• Use CSS Flexbox ~ MDN
• The Complete Guide to Flexbox ~ CSS-Tricks
• What is 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 the vendor prefix . To quickly add a prefix, use Autoprefixer. See this answer for more details.

Answer 2

Using this CSS, place your div as follows (float first):

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

Note: You can also float the right first, then the left, and then center. It is important that the floating content comes before the "main" center section.

Note: Usually you will want to add this code at the end of #container: <div style="clear:both;">< /div>, it will make the height of #container extend vertically to accommodate the floating content on both sides, instead of just being positioned from the height of #center, like this This prevents content on both sides from overflowing the bottom.