Equally distribute 3 divs within a div - without float

Question

I have been reading widely about this but haven't been able to solve it to my satisfaction.

I have a div (<section>) that contains one <p> and 3 <div>s. I would like to distribute the 3 divs equally in one line so that the left border of the 1st div is on the left border of the document (<body>) and the the right border of the 3rd div on the right border of the document.

I don't want to use float because the backround-color would vanish.

I have tried flex but justify-content did not yield the expected outcome.

Here's the code on JSBIN.

Thank you!

Possible duplicate of [How to align 3 divs (left/center/right) inside another div?](http://stackoverflow.com/questions/2603700/how-to-align-3-divs-left-center-right-inside-another-div) — Michael Benjamin, Feb 13 '16 at 22:51
Thanks Michael_B, I that post has a link to http://stackoverflow.com/questions/2603700/how-to-align-3-divs-left-center-right-inside-another-div/32122011#32122011 which explains how to do it an also why `flex` is the most effective solution. — JoHKa, Feb 14 '16 at 01:33
@johann_ka, you're welcome. And that post you reference was my answer to that question ;-) — Michael Benjamin, Feb 14 '16 at 02:23

score 1 · Accepted Answer · answered Feb 13 '16 at 23:49

You can use display: flex on the container, and set the width of the three div elements to take up one third (or as close as we can get) of its container. The container must have a set width (either pixel or percentage) for it to work.

#container {
  display: flex;
  height: 600px;
  width: 600px;
  background-color: lightgreen;
}
#container div {
  border: 1px solid black;
  margin: 0 10px;
  width: 33.333333%;
}
#container div img {
  width: 100%;
}

<div id="container">
  <div id="content1">
    I'm some content. Regardless of the width of this div, the content will move to the next line and stay within the div instead of overflowing.
    <img src="http://i.imgur.com/P8z2H80.jpg">
  </div>
  <div id="content2">
    I'm some more content. Regardless of the width of this div, the content will move to the next line and stay within the div instead of overflowing.
    <img src="http://i.imgur.com/NfnBZAI.jpg">
  </div>
  <div id="content3">
    I'm even more content. Regardless of the width of this div, the content will move to the next line and stay within the div instead of overflowing.
    <img src="http://i.imgur.com/W8M37N2.jpg">
  </div>
</div>

Equally distribute 3 divs within a div - without float

1 Answers1