Home/ Questions/Q 4014190
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T09:28:01+00:00

This seems like it should be a duplicate – I’ve found many similar questions

  • 0

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 delete this one.

I have an absolutely-positioned div containing several child divs. I want the container to expand to the width of the widest child, and all the other children to expand to the same width. The container should have a minimum width and maximum height; if there are too many children, it should scroll.

So this is similar to the behavior of a combo drop-down, though this is used in a different context.

The solution I came up with works on Chrome, Firefox and IE8, but not on IE7 (standards-mode), where the children do not expand to the container’s width. I’ve tried a number of changes, some of which made the children expand, but all resulted in additional problems. What is the correct way to do this?

I’ve created the following example to illustrate the problem:

<html>
<head>
<style>

.container {
    display: block;
    position: absolute;
    top: 50px;
    left: 50px;
    min-width: 100px;
    max-height: 100px;
    border: 1px solid #999;
    overflow-x: hidden;
    overflow-y: auto;
}

.entry {
    display: block;
    width: auto;
    height: 20px;
    padding: 3px 20px 3px 5px;
    white-space: nowrap;
    background: #eee;
}

</style>
</head>
<body>
    <div class='container'>
        <div class='entry'><input type="checkbox"/>ABCDEFGHIJKLMNOPQRSTUVW</div>
        <div class='entry'><input type="checkbox"/>ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
        <div class='entry'><input type="checkbox"/>ABCDEFGHIJKLMNOPQRST</div>
        <div class='entry'><input type="checkbox"/>ABCDEFGHIJKLMNOPQ</div>
        <div class='entry'><input type="checkbox"/>ABCDEFGHIJKLMNOPQRST</div>
        <div class='entry'><input type="checkbox"/>ABCDEFGHIJKLMNOPQRSTUVW</div>
    </div>
</body>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0