Make two CSS elements fill their container, side-by-side, with margin

Question

I want two elements to take up an exact percent of the parent's width, but I also need margins on them holding them apart. I have the following markup:

<div class='wrap'>
  <div class='element'>HELLO</div><div class='element'>WORLD</div>
</div>​

.wrap {
  background:red;
  white-space:nowrap;
  width:300px;
}
.element {
  background:#009; color:#cef; text-align:center;
  display:inline-block;
  width:50%;
  margin:4px;
}

As you can see in http://jsfiddle.net/NTE2Q/ the result is that the children overflow the wrapper:

How can I get them to fit within the space? Sadly, there is no box-sizing:margin-box for this case.

Answer 1

Technique #1 - Modern CSS3 calc()

Using CSS3's calc() length, you can do this by setting the width of the .element to:

.element {
  width: 49%;                     /* poor approximation for old browsers    */
  width: calc(50% - 8px);         /* standards-based answer for IE9+, FF16+ */
  width: -moz-calc(50% - 8px);    /* support for FF4 - FF15                 */
  width: -webkit-calc(50% - 8px); /* support for Chrome19+ and Safari6+     */
}

Demo: http://jsfiddle.net/NTE2Q/1/

^{See http://caniuse.com/calc for details on which browsers and versions support this.}

 

---

Technique #2 - Old School Wrapping

Calculations can be made by piling up multiple elements. For this case, we wrap each 'element' in a wrapper that is 50% wide but with a 4px padding:

<div class='wrap'>
  <div class='ele1'>
    <div class='element'>HELLO</div>
  </div><div class="ele1">
    <div class='element'>WORLD</div>
  </div>
</div>​

.ele1 {
    display:inline-block;
    width:50%;
    padding:4px;
    box-sizing:border-box;          /* Make sure that 50% includes the padding */
    -moz-box-sizing:border-box;     /* For Firefox                             */
    -webkit-box-sizing:border-box;  /* For old mobile Safari                   */
}
.element {
    background:#009; color:#cef; text-align:center;
    display:block;
}

Demo: http://jsfiddle.net/NTE2Q/2/

​

 

---

Technique #3 - Using (CSS) Tables

The same result can be made by treating the wrapper as a 'table' and each element as a cell within the same row. With this, whitespace between elements is not important:

<div class='wrap'>
  <div class='element'>HELLO</div>
  <div class='element'>WORLD</div>
</div>​

.wrap {
    background:red;
    width:300px;
    display:table;
    border-spacing:4px
}
.element {
    background:#009; color:#cef; text-align:center;
    width:50%;
    display:table-cell;
}
​

Demo: http://jsfiddle.net/NTE2Q/4/

Note that this last technique collapses the 4px spacing between the two elements, while the first two techniques cause 8px to appear between the two items and 4px at the edges.

Answer 2

What you are describing is basically a border. So why not to use CSS border property with background-clip? Just don't forget appropriate vendor prefixes.

http://jsfiddle.net/NTE2Q/8/

.wrap {
    background-color: red;
    white-space:nowrap;
    width:300px;
}
.element {
    background:#009; color:#cef; text-align:center;
    display:inline-block;
    width:50%;
    border:4px solid rgba(0,0,0,0);
    box-sizing: border-box;
    background-clip: padding-box;
}

Answer 3

None of the above techniques worked consistently enough cross browser for me. I found a slightly different technique using display:table-cell allowed me to place 2 or more elements next to each other. Here is an example of it in action.

The CSS:

    display:table-cell;
    background:#009; color:#cef; text-align:center;
    width:22%; /*Set percentage based on # of elements*/
    border:4px solid rgb(255,0,0);/*no longer need background to be red, just make border red*/

You no longer even need the wrapper since the div is now treated as a <td>.

Answer 4

Though I strongly suggest using Phorgz's calc() technique whenever possible, I also want to propose an old-school way of doing this that uses only one wrapper and position: relative to achieve the effect.

.two-blocks-by-side() LESS Mixin:

.two-blocks-by-side(@padding) {
  padding: @padding (@padding + @padding / 2);
  font-size: 0;

  & > div {
    position: relative;
    display: inline-block;
    font-size: initial;
    width: 50%;

    &:first-child { left: -1 * @padding / 2 };
    &:last-child { right: -1 * @padding / 2 };
  }
}

JS Bin example