The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Hybrid View

CSSP spacing

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.

You have to remember that in the correct box model that padding and borders are added to the total width/height of an element.

Therefore when you have a float of 50% and then you add a border to it of 1px your float becomes 50% +2px wide (1px on each side). This meansd the gap is 1% less 2px frm the other element which means it will disappear quicker than a 1% gap would when the window is resized.

On the other hand the space between the top elements and bottom elements has been set at 1% and is therefore constant. It has been set as 1% from the element and not x% from the top (which includes the element). Your right element is 51% from the left which includes the left element which is 50%+2px as explained above.

One solution is to put the padding and borders on an inner element so that the outer element stays at the specified width. This also has the benefit of avoiding the broken box model in IE5.