Two floaters with margins... how do i set their widths???

for those of you who have helped me before and told me to change from tables to divs, well, i'm on the last part before i convert the big table.

my problem is that on my home page i have category boxes that i want to each occupy half of the main column. HOWEVER, they also need margins to separate from each other.

here is their css code:


however, the 50% width makes them overflow to the next line, even though they are floated. how can i set them to stay on the same line, make their widths perfectly halved, and keep their margins???

(click here for the way it looks now and scroll down to the middle of the page)

Here's a quick suggestion from a newbie:

You have set widths at 50%, but beware that this does not (I believe) account for the 1px border you are using, and perhaps also the margins as well. Your widths are actually 50% + 2px of border and 12px of total left/right margin. It might be better to assign a pixel width to each box and remove 14px on each width to account for the border and margins. The box model adds border, padding and margin widths to the div width.

An alternative is to have each div at 50% and assign each div an inner div which has border and margin but no width. This allows a lot more flexibility. The content will adjust itself to fit.

I am fresh out of the self-teaching textbooks, so this is not expert advice, but hope it helps anyway!

thanks so much man. quickest and simplest answer i've ever gotten.