Simon Battersby

I hit this issue building this website and can’t find much about it anywhere else.

This seems to manifest itself where a floated column of fixed width is adjacent to a fluid column to which overflow:auto (commonly used to clear floats) has been applied. So my example html:

<div id="left"></div>
<div id="right"></div>

…complex stuff…. and my css:

#left{float:left;width:200px;height:100px;background-color:red}
#right{margin-left:200px;height:100px;background-color:blue;overflow:auto}

Now in IE6 (if we’ve fixed the 3px issue), IE7, IE8, FF2 and FF3 the page looks fine:

But in Chrome 1, 2 and 3 and Safari 4 it looks like this, with a big gap on the right:

And in Opera 9 and 10 the gap’s on the left like this:

It seems that Opera, Chrome and Safari introduce a gap equivalent to the width of the floated element, #left. If #right is assigned a fixed width, the problem goes away, there’s no gap. However, removing overflow:auto and using another method of clearing floats is the only other solution if I want #right to remain fluid.

I’m not sure which browser is correct here, or even if there is a “correct”.

Do please send me a comment if you have anything to contribute to this.

I’ve created a test page here, if you want to see this for yourself.