DIV width in % and padding - html

Question

I have 2 DIVs next to each other (A to the left and B to the right) within a container of 980px wide. I set a width of 50% for both A and B which works great.
Question: I'd like to add some padding-right to DIV A so that the text in it doesn't touch the text of div B. If I do that I need to adjust the % of the DIV (i.e. to 48%). Is there a way to avoid that? (i.e. get the % automatically adjusted based on the padding)

Answer 1

yeah, you can use the box-sizing property. By setting:
box-sizing: border-box;
The width property will set the total width (including borders and padding), so for example a div with:
div {
width:500px;
padding: 20px;
border: 10px solid blue;
box-sizing: border-box;
}
would have a visual overall width of 500px, rather than a default width of 500 + 40 + 20 = 560px.
For reference: http://css-tricks.com/box-sizing/

Answer 2

You can do it by using one more wrapping div:
<div class="wrapper">
<div class="inner">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
.wrapper { width: 960px; }
.inner { padding: 1em; }
.left, .right { width: 50%; float: left; }
Or use box-sizing that makes calulations very easy.
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
It changes the rendering of paddings and border so that they are included in the width rather than added to it.

Answer 3

If you would like to add padding without reducing the width of the div, you can use: box-sizing: border-box; More info
e.g.
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
This will make your div the desired width (50%), and the padding will be subtracted rather than added to the div. Beware this is a CSS3 property and won't work in all versions of IE:
http://caniuse.com/css3-boxsizing

Answer 4

HTML
<div class="tbl">
<div class="row">
<div class="cell">A</div>
<div class="cell">B</div>
</div>
</div>
CSS:
.tbl{
display:table;
border-spacing:5px;
}
.row{
display:table-row;
}
.cell{
display:table-cell;
width:50%;
}

Answer 5

for width, margin & padding values use % or em values
Have a look at this code
.container {
max-width: 980px;
}
section {
float: left;
margin: 0.0122448; /* 10px ÷ 980px */
width: 0.479591; /* 470px ÷ 660px */
}
aside {
float: right;
margin: 0.0122448; /* 10px ÷ 980px */
width: 0.479591; /* 470px ÷ 980px */
}
for complete tutorial on responsive design -
http://learn.shayhowe.com/advanced-html-css/responsive-web-design

Answer 6

You can apply box-sizing:border-box to the divs with padding.
-moz-box-sizing: border-box;
box-sizing: border-box;
Live demo
From MDN:
border-box:
The width and height properties include the padding and border, but not the margin.
box-sizing is supported all the way back to IE8.

Answer 7

You have to use box-sizing:border-box; beacuse using border-box; will give you a look of box with border & it will manage space for border by itself . you can give width and color of your border by yourself border:2px solid black; . And thus, the content of your both divs can be diffrentiated.