casthyperin
New Member
I am getting an issue within IE7. I have the created the following html to demonstrate the possible 'issue'.HTML:\[code\]<div id="container"> <div id="head"> </div> <div id="left"> </div> <div id="right"> </div> <div id="no-float"> </div></div>\[/code\]CSS:\[code\]#container { width:200px; height:200px; margin: 0 auto; background-color:#555555;}#head { width:200px; height:20px; background-color:black; float:left;}#left { width:100px; height:40px; background-color:blue; float:left;}#right { width:100px; height:40px; background-color:red; float:left;}#no-float { width:20px; height:20px; position:relative; background-color:green;}\[/code\]Now I expect the green no-float div to be at the very top left of the container as from my understanding the normal content should completely ignore the floated content. This works as expected in all browsers I have tested by not in IE7. Is it a problem with my understanding of floats or is this a bug in IE7? If it is a bug can anyone point me in the right direction to fix it? Here is a jsfiddle of the problem. JSFiddle