bootstrap rowspan with margins - html

Question

I have managed to create a page that looks like this:
<div class="container">
<div class="row fullscreen">
<div class="col-md-6 pink-panel">
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12 gray-panel">
</div>
</div>
<div class="row">
<div class="col-md-6 orange-panel">
</div>
<div class="col-md-6 black-panel">
</div>
</div>
</div>
</div>
</div>
You can view it here
The problem I have is that I would like to have a small margin between each panel (right and top). If I add top margin I get this:
http://codepen.io/r3plica/pen/jPVQqy
which you can see makes the rows not line up anymore, which is not what I want. Similarly, if I add a right margin, predictably I get this:
http://codepen.io/r3plica/pen/NqbErr
Now I know the reason for both these issues. I could try and write some JavaScript to help me fix the issue, but I would prefer to solve this in pure CSS.
Has anyone encountered this issue before and solved it?

Answer 1

you could nest your color-panels
<div class="container">
<div class="row fullscreen">
<div class="col-md-6">
<div class="col-md-12">
<div class="pink-panel">
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="gray-panel">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="orange-panel">
</div>
</div>
<div class="col-md-6">
<div class="black-panel">
</div>
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/0z76regv/

Answer 2

You must remember that bootstrap uses specific margins and paddings for its layout (e.g. negative margins for row classes) To fit elements in desired way you should remember that each col-* block has its width described in percentage.
I would suggest two solutions:
Overloading default percentage for columns if you don't mind changing 5px to arbitrary values. You could e.g. set col-md-6 classes to use only 49.5% of its width and remaining 0.5% for margins.
http://codepen.io/anon/pen/QbGJgp
.col-md-6 {
width: 49.5%;
margin-right: 0.5%;
}
.row {
margin-bottom: 0.5%;
}
Using calc() function to substract aforementioned 5px from proper elements. More info: https://developer.mozilla.org/en-US/docs/Web/CSS/calc, however this functionality isn't very compatible with older browsers: http://caniuse.com/#feat=calc.
http://codepen.io/anon/pen/yNVQoz
.col-md-6 {
width: calc(50% - 5px);
margin-right: 5px;
}