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

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;
}