Align 3 section inside a div

Question

I have 3 section inside an div and div have a max-width: 1024px;. I make the first 1 float to left and the 3rd one float to right. But the 2nd one, I tried to set it in-between 1st and 3rd using margin: 0 auto;, it did not work...

How to align 3 divs (left/center/right) inside another div?

Here is my Jsfiddle example.

Something like [LEFT] [CENTER] [RIGHT]

Answer 1

here is a possible solution using CSS Calc()

The calc() CSS function can be used anywhere a <length>, <frequency>, <angle>, <time>, <number>, or <integer> is required. With calc(), you can perform calculations to determine CSS property values.

#wrap {
  width: 100%; 
  max-width: 1024px;
  border:1px dotted green;
  font-size: 0; /*fix inline block gap*/
  /* margin: 0 auto; - if you want the #wrap to be centered uncomment this line*/
}
.yolo {
  width: 29.297%; /* 300px/1024px=0.29297 */
  /*max-width: 300px; - this line should be commented if you want to fill the parent with the childs .yolo */
  height: auto;
  display: inline-block;
  font-size: 16px /* show font due to font-size 0 in parent*/
}
.yolo:first-of-type {
  background: yellow
}
.yolo:nth-of-type(2) {
  background: gray;
  width: calc(100% - 58.594%) /* width x 2 (29.297% x2) */
}
.yolo:last-of-type {
  background: blue;
}

<div id="wrap">
  <section class="yolo molo1">Hello</section>
  <section class="yolo molo3">Hey</section>
  <section class="yolo molo2">Hi</section>
</div>

UPDATE: OP's Comments below

1st:

Thanks, but i wanted to be 3 individual like there is a gap between them

2nd:

Btw, Does calc() function in css work in every other browser?

Answer:

Snippet with gap between them

#wrap {
  width: 100%;
  max-width: 1024px;
  border:1px dotted green;
  font-size: 0; /*fix inline block gap*/
  /* margin: 0 auto; - if you want the #wrap to be centered uncomment this line*/
}
.yolo {
  width: 29.297%; /* 300px/1024px=0.29297 */
  max-width: 300px;
  margin-right:6%;
  display: inline-block;
  font-size: 16px /* show font due to font-size 0 in parent*/
}
.yolo:first-of-type {
  background: yellow;
}
.yolo:nth-of-type(2) {
  background: gray;
  width: calc(100% - 70.594%) /* width: (29.297% x 2)+(6% x 2) */
}
.yolo:last-of-type {
  background: blue;
  margin-right:0
}

<div id="wrap">
  <section class="yolo molo1">Hello</section>
  <section class="yolo molo3">Hey</section>
  <section class="yolo molo2">Hi</section>
</div>

CSS Calc() function works from IE9 and above.

Answer 2

If you switch the order of your div elements, you can get the result that you want as follows.

Float .molo1 to the left and .molo2 to the right.

Keep .molo3 as non-floated content and set the left/right margins to 35%, which is 70% divided by 2, 70% being the width left over after taking into account the width of the central div.

If needed, set margin: 0 auto to the wrapping element if you need to center it (optional).

#wrap {
    width: 100%;
    max-width: 1024px;
    border: 1px dotted blue;
    margin: 0 auto; /* if you want centering */
}
section.yolo {
    width: 30%;
    max-width: 300px;
}
section.molo1 {
    background-color: yellow;
    float: left;
}
section.molo2 {
    background-color: blue;
    float: right;
}
section.molo3 {
    background-color: gray;
    margin: 0 35%;
}

<div id="wrap">
    <section class="yolo molo1">Hello</section>
    <section class="yolo molo2">Hi</section>
    <section class="yolo molo3">Hey</section>
</div>

Answer 3

Set width:33%; for each and get rid of the float:right.

Here: http://jsfiddle.net/29zatakh/

Answer 4

You can do this easily with Flex Box:Fiddle Sample

#wrap {
    width: 100%;
    max-width: 1024px;
    display:flex;
}
.molo1, .yolo {
    width: 30%;
    max-width: 300px;
    height: auto;
    background: yellow;
    justify-content:space-between;
      margin:2em;
    padding:1em;

}
.molo3 {
    background: gray;

}
.molo2 {

    background: blue;
}