How Can One Make A Container's Child Divs Match The Width Of The Largest Child In IE7?

This seems like it should be a duplicate - I've found many similar questions - but none had an answer to mine that worked. If I have missed one, please point me to it, and I'll de

Solution 1:

In IE7, the parent div needs a defined width for width:100% or width:auto to work properly on the children elements. Unfortunately for you, defining a width on the parent is counter-productive as you want the parent size to be dynamic in relation to the largest child, not static.

Now, this browser quirk might be innocuous enough for you to just ignore it and leave it be, but if you want your site to still look good in IE7 you always have the option of using JavaScript to set the parent width equal to the largest child element.

Here is the JavaScript I used:

$(function() {
    /* function finds largest width of the .entry child of .container
    and assigns that width to the parent .container.
    This is for IE7 bug that requires a defined parent width in order for 
    width:auto to work on the children elements
    */
    var elemWidth = 0;
    var maxWidth = 0;
    $('.container')
        .find('.entry')
        .each(function() {
            // iterate through .entry and assign largest width to var elemWidth
            if ( $(this).width() > elemWidth ) {
            elemWidth = $(this).width();
            }
         });
    maxWidth = elemWidth + 30; // extra 30px spacing to compensate for y-overflow
    $('.container').width(maxWidth);
});

And here is a working jsfiddle example: http://jsfiddle.net/qG8Qf/1/

Solution 2:

This should work...

$(function() {
    var maxWidth = 0;
    $('.container')
        .find('div')
        .each(function() { maxWidth = Math.max($(this).width(), maxWidth) })
        .each(function() { $(this).width(maxWidth) })
        .width(maxWidth);
});

EDIT: doesn't seem to work in IE7 after all. Maybe someone has a fix?