IE7 and IE8: Float clearing without adding empty elements
- by tk-421
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.
