css: 20px желоба между 50% шириной divs

Question

У меня есть контейнер div со 100% шириной, с 2 .block div внутри, оба с шириной 50%, отображение встроенного блока и плавающее влево. Возможно ли, чтобы между этими div были совместимы 20px желоба?
Я пробовал использовать неисчерпаемый метод установки их ширины до 49% каждый и с 2% правым краем слева, но в идеале я хотел бы, если это возможно, создать непротиворечивый желоб 20px между этими двумя div.
jsFiddle демо: 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; 
} 

Любые предложения будут высоко оценены!

Answer 1

Я могу помочь вам, если обертка DIV является приемлемым. Секрет (как это часто бывает) в * {box-sizing: border-box;}.

Fiddle.

Answer 2

Вы должны добавить еще один класс. я думаю, его работа.

.block:last-child { 
    margin-left:20px; 
    float:right; 
    } 

& уменьшить ширину .block до 49%.

Отъезд в fiddile: http://jsfiddle.net/D6U3t/14/

Благодаря

Answer 3

Я бы работал с отступом на родительском контейнере, а затем у дочернего контейнера была бы 100% ширина и высота 100%.

Проверьте мой JSFiddle: http://jsfiddle.net/D6U3t/10/

HTML

<div class="container"> 
    <div class="block first"> 
     <div class="inner-block"></div> 
    </div> 
    <div class="block second"> 
     <div class="inner-block"></div> 
    </div> 
</div> 

CSS

* { 
    box-sizing: border-box; 
} 

.container { 
    margin: 0; 
    width: 100%; 
    height: 100%; 
    background-color: silver; 
} 

.block { 
    position: relative; 
    width: 50%; 
    height: 200px; 
    float: left; 
} 

.block.first { 
    padding: 0 10px 0 0; 
} 

.block.second { 
    padding: 0 0 0 10px; 
} 

.inner-block { 
    height: 100%; 
    width: 100%; 
    background-color: red; 
} 

Answer 4

Я использовал внутренний контейнер, чтобы решить эту проблему.

fiddle:http://jsfiddle.net/kpwp7/4/

Answer 5

Если ваши требования browser support позволяют, вы можете использовать функцию calc() CSS:

http://codepen.io/troywarr/pen/MaVKGe?editors=110

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 { 
    width: calc(50% - 10px); /* subtract half of 20px gutter */ 
    height: 200px; 
    background-color: red; 
} 

.block:first-child { 
    float: left; 
    margin-right: 10px; /* half of 20px gutter */ 
} 

.block:last-child { 
    float: right; 
    margin-left: 10px; /* half of 20px gutter */ 
}