Here is an image to explain my problem:
I need the padding to be factored in when the \[code\]width: 50%;\[/code\] is done.If I don't, the first \[code\]div\[/code\]'s width will actually be \[code\]50% + 2em\[/code\] because the padding had not been accounted for.How can I count the padding in the width calculation, or is there a workaround for having two equal-sized but padded \[code\]div\[/code\]s?Fiddle: http://jsfiddle.net/sMuCY/Code for testing:\[code\]<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>\[/code\]