layout issues

I’m trying to create a page with a number of different-sized boxes that take up a given size.

IE The whole page is 790×600 or whatever, and inside that I’m going to have a bunch of different sized pieces that make up that size, similar to a puzzle. Each box has a 1px border and a margin of 5px around it to space them out.

The problem is that I’m trying to figure out how to “lock” those boxes to a certain size.

Basically, how do I set the boxes to be 50% 50% of the available space, but not go over that, etc. If I set them to 50/50 etc, they will not be put next to each other, because one is wrapped down to the next line?(margin,padding,etc. gets in the way with the calculations.)

I need to be able to lock them into certain sizes, say 200px,600px, or 50%,200px… That can’t go over that size no matter what is put into them, but also should never be smaller than that.

Thanks for the help. I could easily do this in tables but CSS killing me…

Here’s the html page…

[code]<div id=”box”>

<div id=”user_content” style=”width:775px;”></div>

<div id=”user_content” style=”display:inline;width:50%;”></div>
<div id=”user_content” style=”display:inline;width:45%;”></div>

</div>[/code]

and here’s the CSS

[code]div#user_content {
border:1px solid #000000;
margin:5px;
padding:5px;
background-color:#ffffff;
}
div#box {
background-color: #FEAB22;
padding-top:5px;
border-right:1px solid #000000;
border-left:1px solid #000000;
border-bottom:1px solid #000000;
}[/code]

Also in #CSS _↴