in css, width
by default does not include padding or border, so two divs with width 48% and 1% margin will fit the width of their parent. the moment you add any padding or border, the combined width of your inner divs will be greater than 100%.
You can do two things:
1) set the box-sizing property of css, keeping in mind that there are some compatibility issues
#browserDiv, #infoDiv {
box-sixing: border-box;
}
2) set the width/margin of a wrapper div, and use an inner div to set the padding/border.
<div class="wrapper"><div id="browserDiv"></div></div>
<div class="wrapper"><div id="infoDiv"></div></div>
.wrapper {
width: 48%;
margin: 0 1%;
}
#browserDiv, #infoDiv {
padding: 5px;
}
#browserDiv {
border: 1px solid blue;
}
#infoDiv {
border: 1px solid red;
}
I'm a bit of a dinosaur, so I tend to use the latter.