Here's a picture of my issue:

Problematic floats

Test3 and Test7 display correctly, but all of the other items cause the drop down list to wrap to the next line, creating ugly scroll bars. The code for Test3, Test4, and Test5 is identical. The code for Test7, Test8, and Test9 are also identical. As you can see, the containing block (red) has plenty of room for all of the elements.

I've gone through the entire page hierarchy, adding zoom: 1 to each item in an attempt to trigger hasLayout, with no changes.

The goal here is to have three columns, with a single column of text beneath them.

Here is a full source listing which exhibts this problem:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
    <style type="text/css">
        .columnContainer {
            overflow: auto;
        }

        .columnContainer .column {
            float: left;
        }

        .columnContainer .row {
            height: 3em;
            overflow: auto;
        }

        .columnContainer .column .row label {
            display: block;
            width: 10em;
            float: left;
        }

        .columnContainer .row .content {
            float: left;
            overflow: visible;
        }

                .row .content {
            background-color: blue;
        }

        /* Cosmetic classes */
        .row label {
            background-color: pink;
        }

        .row {
            background-color:yellow;
        }

        * {font-family: arial,helvetica,sans-serif; font-size: 8pt;}
    </style>

    <!--[if IE 6]>
        <style type="text/css">
            /* Hack for IE6 to make overflow:auto work correctly. */
            * html .columnContainer {
                height: 1%;
            }

            .columnContainer .row 
            {
                /* Forces the .row div to collapse to its content width in IE6. */
                float:left;
                clear:both;
            }

            .wrapper
            {
                width: 550px;
                background-color: Red;
            }
        </style>
    <![endif]-->
</head>
<body>

    <div class="wrapper">
        <div class="columnContainer">
            <div class="column">
                <div class="row">
                    <label class="required lcol">Test3</label>
                    <div class="content rcol">
                        <select style="width: 175px;"></select>
                    </div>
                </div>

                <div class="row">
                    <label class="required lcol">Test4</label>
                    <div class="content rcol">
                        <select style="width: 175px;"></select>
                    </div>
                </div>

                <div class="row">
                    <label class="required lcol">Test5</label>
                    <div class="content rcol">
                        <select style="width: 175px;"></select>
                    </div>
                </div>
            </div>


            <div class="column">
                <div class="row">
                    <label class="required lcol">Test7</label>
                    <div class="content rcol">
                        <select style="width: 100px;"></select>
                    </div>
                </div>

                <div class="row">
                    <label class="required lcol">Test8</label>
                    <div class="content rcol">
                        <select style="width: 100px;"></select>
                    </div>
                </div>

                <div class="row">
                    <label class="required lcol">Test9</label>
                    <div class="content rcol">
                        <select style="width: 100px;"></select>
                    </div>
                </div>
            </div>

        </div>

        <p>blah blah blah</p>
    </div>

</body>
</html>

3 answers

2
points
This was chosen as the best answer

Longer look reveals that the height here:

.columnContainer .row {
    height: 3em;
    overflow: auto;
}

is affecting the width of the element in IE6, so you could substitute line-height instead.

and then the float here:

    .columnContainer .row 
    {
        /* Forces the .row div to collapse to its content width in IE6. */
        float:left;
        clear:both;

}

needs to be removed to stop the float drop by the select element. so remove the float, change the height to line-height and it will all work!

which basically means that the way you've approached it probably needs rethinking if it's to work in IE 6 as you now no longer have the row div wrapping the floated contents.

I'd be tempted to start with a simpler label input arrangement.

Answered over 7 years ago by Tony Crockford
  • Nicely done. I'm still curious on the "why" aspect of things, but I doubt that it's really possible to find out at this point. So far as a simpler layout goes, I'm open to suggestions. The two requirements that drove this one were: 1) Cells must be independent within the markup, and removing one must cause surrounding cells to adjust gracefully (most of these fields are hidden via server-side code) and 2) The "select" portion of each field may contain multiple items (for example, a text box and date picker), hence the use of the .content div. AaronSieb over 7 years ago
0
points

IE6 has some weird float bugs. I always add display:inline; to any floated element where I've also set a width.

try it - it might fix the problem.

without a css reset, each element will have a margin and often it's the IE double margin bug that bites.

Answered over 7 years ago by Tony Crockford
  • Good thoughts, but no luck. Adding display:inline after each float property didn't change anything. Nor did adding div { padding: 0px; margin: 0px;}, or select {padding: 0px; margin: 0px;}. AaronSieb over 7 years ago
0
points

setting this:

.wrapper
            {
                width: 550px;
                background-color: Red;
            }

to width: 750px;

resolves the problem, which suggests that IE is rendering the floats in a strange way, and the container width isn't wide enough for them.

It's late now, so I'll have a longer look in the morning.

Answered over 7 years ago by Tony Crockford