IE Float Layout Collapse Bugs

3 pixel jog in column adjacent to float

This page is rendered in Strict Mode. Render this page in Firefox and in IE. The layout is OK in Firefox but fails in IE with 3px jog bug in IE.

The wrapper background is gray, with blue border and set to be 90% of browser width and is intended to contain the 2 columns under investigation.

Add margin-left to middlecol to effect the 2 column page.

IE has the 3px jog bug - see text shifted right 3 pixels in the green middle column adjacent to a float.

#wrapper	{
	background-color:#CCCCCC ; /* gray */
	width: 90% ;
	border: 4px solid #000088 ; /* blue */
	margin: 0 5% ;
	padding: 0 ;
	}
div	{  /* to remove effect of different browser defaults */
	padding: 0 ;
	margin: 0 ;
	border: 0 ;
	}
#leftcol	{
	width: 50% ;
	float: left ;
	background-color: #FFFF99 ; /* yellow */
	}
#middlecol	{
	background-color: #669966 ; /* green */
margin-left: 50% ;
}
The left column is 50% wide, has background colour set to yellow and floats left. The 3 pixel jog can be seen in the green column but only alongside this float.

The middle column has background colour set to green. The text in the middle column no longer flows around the left float because the margin-left setting makes text wrap into this column.

Note the 3 pixel jog to the right at the top of this column where the text touches the left float.

Note that the 3 pixel jog disappears as soon as the right column text is below the bottom of the float.