To ensure that divs of varying numbers, widths, and heights have matching heights, I am implementing a jQuery script that requires them to float. However, I prefer for them to be centered, so I am utilizing the relative position trick for centering.
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>
Everything seems to work well initially, but I am having trouble with the wrapper not shrinkwrapping correctly. As the images load, the green divs wrap to the next line as intended, causing a gap on the right side which disrupts the centering effect of the yellow div. How can I ensure that the yellow div matches the width of all green divs in a row?
If there are any other methods to equalize div heights while centering them, I am open to suggestions. Additionally, scripts to equalize widths of specific div classes based on varying content would also be helpful. Ultimately, my goal is to center the green divs in a table-like layout that accommodates different screen sizes and content.