The problem with the width: 50% at the border! = None (CSS)

Question

width issue: 50% at border! = none

take a look at http://jsfiddle.net/5nYSf/

the result should be like this

Answer 1

You can put two elements next to each other that are 50% wide, then you can put in every other element that should have a border and a border: http://jsfiddle.net/5nYSf/47/

Answer 2

, /. , 100px, 2px 10px, 114px . ( : .) IIRC, , .

. width:49% width:50% , - .
, div. divs /margin/padding 50% , .

:
http://jsfiddle.net/5nYSf/35/

Answer 3

, , calc() CSS.

.attachments {
height:80px;    
background-color:#E4E4E4;
}

.attachments span {
float:left;
height:100%;
width:calc(50% - 6px);
background-color:#9FB9CA;
border:3px #879AA8 solid;
}

http://jsfiddle.net/5nYSf/277/

Answer 4

: add {box-sizing: border-box; } .attachments 50%

Answer 5

, 50% + 50% + 3px ( ) 100% + 12 , 12 , (100%). 49% , 12 .

Answer 6

( - ), : 100% : 50% ( )

Answer 7

.

50% + a > 50%

:

.attachments {
    height:80px;    
    background-color:#E4E4E4;
}

.attachments span {
    display:inline-block;
    height:100%;
    width:48%;
    background-color:#9FB9CA;
    border:3px #879AA8 solid;
}