problem with width:50% when border != none (CSS)

problem with width:50% when border != none

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

result should be like this

You can put two elements beside each other that are 50% wide, then you can put another element inside each that has to margin and border: http://jsfiddle.net/5nYSf/47/

There is a easy way: add { box-sizing: border-box; } in .attachments and the 50% width will contain the border too

The trick is, border and margin are not included in height/width calculation. So, if you have element with width 100px, border 2px and left margin 10px, the 114px of horizontal space will be taken up. (Border is counted twice: left and right.) IIRC, padding is not included too, but I'm not sure about that.

There're several options to solve this. You can have width:49% on both elements or width:50% on first and make second to take up the rest.
If both elements must take exactly equal space, you can include each in its own div. Those divs will have no border/margin/padding and take up exactly 50% of space and border will be specified on inner element.

The last method in action:
http://jsfiddle.net/5nYSf/35/

If your borders are a fixed width you could substract the border lenght from your element width using the calc() function in your 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/

Border is in addition to the defined width, so 50% + 50% + 3px border (on both sides) ends up being 100% + 12px, which is 12px bigger than the containing element (100%). Try using 49% or some other measurement that will leave 12px for the border.

Don't forget to factor in those margins (to show up light grey areas) and that you can't use height:100% for the same reasons you can't use width:50% (as described by others here)

the border expands the box.

50% + border > 50%

you have to decrease the width:

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

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