This stuff looks like a 90% wide box with two boxes beneath it, each occupying about half the available width.

One problem is that the horizontal space between the two bottom boxes is less than the vertical space between the top box and the two bottom boxes. As you decrease the viewable area, the space between these boxes should decrease and they should all touch at the same time, but don't. It is as if the horizontal space of 1% represents the distance between the two lower boxes _not counting the border_.

Also, if I add something desirable like .5em padding to the gray boxes, the width percentage calculations are wrong. How can I have some fixed padding within the boxes and keep the space between the boxes uniform?

Hopefully it will be clear what effect I'm trying to achieve upon looking at the document. The vertical space between the box should be the same as the horizontal space, and some padding in the boxes would be nice.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="a.css" type="text/css" />
<div id="top" class="box">
blah blah
<div id="left" class="box">
left box
<div id="right" class="box">
right box

and a.css:
body {
margin: 0 auto;
padding: 0;
width: 90%;
.box {
background: #ddd;
border: 1px dashed gray;
#top {
margin-bottom: 1%;
#left {
float: left;
width: 50%;
#right {
margin-left: 51%;