Consistent spacing between neighboring elements inside a container - html

Question

I have a container of certain height and width that holds a number of children (divs). I would like to have a 4px lightblue border around each div. Two neighboring divs should only have 4px space between them.
I'm able to accomplish this by manually setting the heights, widths, and margins/borders, but I'm sizing the children by percentage of the parent.
Here's a fiddle I have set up showing the divs in the parent, but without any spacing or border.
.container {
height: 300px;
width: 300px;
background-color: lightblue;
}
.left {
width: 30%;
height: 100%;
background-color: lightyellow;
float: left;
}
.top-right {
width: 70%;
height: 50%;
background-color: lightred;
float: right;
}
.bottom-middle {
width: 35%;
height: 50%;
background-color: lightpink;
float: left;
}
.bottom-right {
width: 35%;
height: 50%;
background-color: lightgreen;
float: right;
}
.border {
/* margin: 4px; */
}
<div class="container">
<div class="left border"></div>
<div class="top-right border"></div>
<div class="bottom-middle border"></div>
<div class="bottom-right border"></div>
</div>
http://jsfiddle.net/ymv0oave/

Answer 1

2px border for all divs, and 2px border for container.
.container {
...
border: 2px solid blue;
}
.container div{
box-sizing: border-box;
border: 2px solid blue;
}
https://jsfiddle.net/afelixj/mja5kfvw/

Answer 2

Putting the full answer here
.border {
/* margin: 10px; */
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:4px solid red;
padding: 4px;
}
.remove-right{
border-right: none;
}
Then put the class to your div class tag
<div class="container">
<div class="left border remove-right"></div>
<div class="top-right border remove-right "></div>
<div class="bottom-middle border"></div>
<div class="bottom-right border"></div>
</div>

Answer 3

You can use the calc() function is css to make use of % and still have an exact 4px border.
HTML:
<div class="container">
<div class="left border-right"></div>
<div class="top-right border-bottom"></div>
<div class="bottom-middle border-right"></div>
<div class="bottom-right"></div>
</div>
CSS:
.left {
width: 30% //Fallback for the 0.8% people still using IE7/IE8
width: calc(30%-4px); //HERE
height: 100%;
background-color: lightyellow;
float: left;
}
.top-right {
width: 70%;
height: 70% //Fallback for the 0.8% people still using IE7/IE8
height: calc(50% -4px); //HERE
background-color: lightred;
float: right;
}
.bottom-middle {
width: 35% //Fallback for the 0.8% people still using IE7/IE8
width: calc(35% -4px); //HERE
height: 50%;
background-color: lightpink;
float: left;
}
.bottom-right {
width: 35%;
height: 50%;
background-color: lightgreen;
float: right;
}
.border-right {
border-right: 4px solid lightblue;
}
.border-bottom {
border-bottom: 4px solid lightblue;
}