This bug affects: IE7
Floated elements that follow other floated elements and have `clear` set do not shrink-wrap correctly
Tue Aug 18 21:17:12 2009
Yet another bug I found on Gérard Talbot's IE7 Bug Collection Page - the source of most of my demo. The bug affects IE7 . What happens is that floats that preceed floats and have clear set do not shrink-wrap properly. Let's take a look:
The demo is available on a separate page
<div> Here is a <div> having float: left and clear: left. As expected, it takes, it occupies as much width it requires from the body's content area. </div> <div> This is the same type of <div>: a left-floated <div> with clear: left. This <div> should use, should take, should occupy the whole content area of the body node (expected results). However, in Internet Explorer 7, this left-floated <div> with clear: left only takes, only occupies a very narrow chunk of the body's content area (actual results). More text filling. More text filling. More text filling. More text filling. More text filling. </div> <div> Here, a third <div> having float: left and clear: left. Change your browser window viewport's width. </div> <ul> <li> Here is a <div> having float: left and clear: left. As expected, it takes, it occupies as much width it requires from the body's content area. </li> <li> This is the same type of <div>: a left-floated <div> with clear: left. This <div> should use, should take, should occupy the whole content area of the body node (expected results). However, in Internet Explorer 7, this left-floated <div> with clear: left only takes, only occupies a very narrow chunk of the body's content area (actual results). More text filling. More text filling. More text filling. More text filling. More text filling. </li> <li> Here, a third <div> having float: left and clear: left. Change your browser window viewport's width. </li> </ul>
div, li { background-color: #ddd; border: 1px solid green; clear: left; color: black; float: left; }
In IE7 we can see that the second and third ' element"><li>s and ' element"><div>s do not shrink-wrap properly. Instead of extending onto the full available width, they are "cut" short and start to shrink-wrap prematurely. As Sjaak Priester, the person whom Gérard Talbot credits for the bug, reasons is that IE first renders the floated element on the same line as the previous float, then sees clear and clears it under but fails to redraw the text.
The reason I have ' element"><div>s and a ' element"><ul> in my demo is because the fixes are slightly different for both of these cases; more on that in the solution.
Below are solutions for the above bug ordered by the solution type.
Tue Aug 18 21:17:26 2009
All of the affected
Fixed demo is available on a separate page
<div> Here is a <div> having float: left and clear: left. As expected, it takes, it occupies as much width it requires from the body's content area. </div> <span class="ie_fix"></span> <div> This is the same type of <div>: a left-floated <div> with clear: left. This <div> should use, should take, should occupy the whole content area of the body node (expected results). However, in Internet Explorer 7, this left-floated <div> with clear: left only takes, only occupies a very narrow chunk of the body's content area (actual results). More text filling. More text filling. More text filling. More text filling. More text filling. </div> <span class="ie_fix"></span> <div> Here, a third <div> having float: left and clear: left. Change your browser window viewport's width. </div> <ul> <li> <div>Here is a <div> having float: left and clear: left. As expected, it takes, it occupies as much width it requires from the body's content area.</div> </li> <li> <div>This is the same type of <div>: a left-floated <div> with clear: left. This <div> should use, should take, should occupy the whole content area of the body node (expected results). However, in Internet Explorer 7, this left-floated <div> with clear: left only takes, only occupies a very narrow chunk of the body's content area (actual results). More text filling. More text filling. More text filling. More text filling. More text filling.</div> </li> <li> <div>Here, a third <div> having float: left and clear: left. Change your browser window viewport's width.</div> </li> </ul>
div { background-color: #ddd; border: 1px solid green; clear: left; color: black; float: left; } .ie_fix { display: inline-block; } .ie_fix { display: block; }
Let's see what I am doing here. In the ' element"><div> part of the demo, I am inserting an extra ' element"><span> element between each ' element"><div> and giving that ' element"><span> "layout" (with {display: inline-block;}) as well as setting its display to value block.
Since we cannot insert that ' element"><span> element between our ' element"><li> elements; what I am doing in the ' element"><ul> part of the demo is wrapping the contents of each ' element"><li> in a separate ' element"><div> and floating that ' element"><div> instead (note that I've removed the float off the ' element"><li>s).
Even though this solution is not perfect, as the fixed shrink-wrap would not completely interract with surrounding elements the same way as the original demo would in sane browsers, this method of fixing the bug may be your lucky ticket.