Showing my issue with an accompanying image:
I am looking for a solution to include padding in the width: 50%; calculation. Currently, the first div's width is actually 50% + 2em because the padding was not factored in initially.
Is there a way to incorporate the padding into the width calculation, or is there a workaround to achieve two equally sized padded divs?
Fiddle link: http://jsfiddle.net/sMuCY/
Test code snippet:
<div style="padding:1em;float:left;width:50%;background-color:#faa">
This div has 50% width, 1em padding, float left
</div>
<div style="background-color:#0f0;padding:1em">
This is a div with 1em padding
</div>
<hr>
<div style="float:left;width:50%;background-color:#faa">
This div has 50% width and float left
</div>
<div style="background-color:#0f0">
This is a normal div
</div>