IE7 and IE8: Float clearing without adding empty elements

Posted by tk-421 on Stack Overflow See other posts from Stack Overflow or by tk-421
Published on 2010-04-10T19:05:07Z Indexed on 2010/04/10 19:13 UTC
Read the original article Hit count: 207

Filed under:
|

Hello, I'm having a problem similar to the one described here (without a resolution):

http://stackoverflow.com/questions/2467745/ie7-float-and-clear-on-the-same-element

The following HTML renders as intended in Firefox but not in (both) IE7 and IE8:

<html>
<head>
<style>
ul {
    list-style-type: none;
}
li {
    clear: both;
    padding: 5px;
}
.left {
    clear: left;
    float: left;
}
.middle {
    clear: none;
    float: left;
}
.right {
    clear: right;
    float: left;
}
</style>
</head>
<body>
<ul>
    <li>1</li>

    <li class="left">2</li>
    <li class="right">3</li>

    <li class="left">4</li>
    <li class="middle">5</li>
    <li class="right">6</li>

    <li>7</li>
</ul>
</body>
</html>

This is a form layout, and in Firefox the results appear like:

1
2 3
4 5 6
7

That's what I'm going for. In IE7 and IE8 however, the results are:

1
2 3 5 6
4
7

[Note: I don't want to float anything to the right because I want the fields on my form to left-align correctly, without a giant space in-between the floated fields to account for the parent container's width.]

Apparently I need a full clear, and can probably add an empty list-item element to the list to force clearing, but that seems like a dumb solution and sort of defeats the purpose.

Any ideas? I've spent a few hours reading and trying different options without success.

© Stack Overflow or respective owner

Related posts about css

Related posts about html