css: 20px gutter between 50% width divs

Question

I have a container div at 100% width, with 2 .block divs inside it, both at 50% width, display inline-block and floated left. Is it at all possible to have a consistent 20px gutter in between these divs?
I have tried the unsophisticated method of setting their widths to 49% each and having a 2% right margin on the left one, but ideally I'd like a consistent 20px gutter inbetween these 2 divs, if possible.
jsFiddle demo: http://jsfiddle.net/D6U3t/

HTML:

<div class="container">
    <div class="block"></div>
    <div class="block"></div>
</div>

CSS:

.container {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 300px;
    background-color: silver;
}

.block {
    position: relative;
    width: 50%; height: 200px;
    background-color: red;
    display: inline-block;
    float: left;
}

Any suggestions would be greatly appreciated!

Answer 1

I can help you if a wrapper div is acceptable. The secret is (as it often is) in * {box-sizing: border-box;}.

Fiddle.