Shrinkwrapping floating divs of variable number, width, and height inside another div

In order to achieve matching heights of various divs of variable number, width, and height, I am using a jQuery script that requires those divs to be floating. However, I would like them centered, so I am using the relative position trick to center them.

CSS

div#cardwrap {
border:3px purple solid;
float:left;
position: relative;
left:50%;
}

div#centermaster {
text-align:center;
border:1px yellow solid;
float:left;
position: relative;
left:-50%;
}

div.cardtable {
float:left;
padding:35px;
border:1px green solid;
}

HTML

<div id=cardwrap>
    <div id=centermaster>
        <div class=cardtable>Images</div> (variable number)
        ...
    </div>
</div>

This would work perfectly, except that I can't seem to get the wrapper to shrinkwrap correctly. Before the 开发者_Go百科images load, it looks fine initially - the yellow wrapper is centering the green divs. But as the images load, the green divs wrap to the next line, which I do want. But then, a gap appears on the right so that the yellow div is no longer shrinkwrapping, and thus, not centering, them. How can I maintain the yellow div matching the width of however many green divs can fit on a row?

Another method to equalize div heights while centering them is also welcome.

(Also are there scripts to equalize widths of certain div class, given variable content?) Basically, the end goal is center the green divs into a table-like format, while accommodating for both variable screen sizes and content.

---

Not sure what exactly do you want, but I think, that you need inline-blocks here, like this: http://jsfiddle.net/TSpXZ/

To make them work in IE, add the following in the Conditional Comments:

div.cardtable {
    display:inline;
    zoom:1;
}

And try to experiment more with inline-blocks — they are awesome!