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:

Answer 1

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