{"id":151,"date":"2009-07-19T09:17:31","date_gmt":"2009-07-19T08:17:31","guid":{"rendered":"http:\/\/www.simonbattersby.com\/blog\/?page_id=151"},"modified":"2012-05-29T11:43:43","modified_gmt":"2012-05-29T10:43:43","slug":"overflowauto-and-gaps-in-chrome-safari-and-opera","status":"publish","type":"page","link":"https:\/\/www.simonbattersby.com\/blog\/overflowauto-and-gaps-in-chrome-safari-and-opera\/","title":{"rendered":"Overflow:auto and gaps in Chrome, Safari and Opera"},"content":{"rendered":"

I hit this issue building this website and can’t find much about it anywhere else.<\/p>\r\n\r\n

This manifests itself where a floated column of fixed width is adjacent to a fluid column to which overflow:auto<\/code> (commonly used to clear floats) has been applied. So my example html:<\/p>\r\n\r\n

<div id=\"left\"><\/div>\r\n<div id=\"right\"><\/div><\/pre>\r\n…complex stuff…. and my css:\r\n
#left{float:left;width:200px;height:100px;background-color:red}\r\n#right{margin-left:200px;height:100px;background-color:blue;overflow:auto}<\/pre>\r\n\r\n
Now in IE6 (if we’ve fixed the 3px issue<\/a>), IE7, IE8, FF and Opera 11 the page looks fine:<\/p>\r\n\r\n\"Test\r\n\r\n
But in Chrome and Safari 4\/5 it looks like this, with a big gap on the right:<\/p>\r\n\r\n\"Test\r\n\r\n
And in Opera 9 and 10 the gap’s on the left like this:<\/p>\r\n\r\n\"Test\r\n\r\n
It seems that Safari, plus older versions of Opera and Chrome 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. Interesting that this appears to have been “fixed” in Opera 11, and somewhere between Chrome 3 and Chrome 19.<\/p>\r\n\r\n
I’m not sure which browser is correct here, or even if there is a “correct”.<\/p>\r\n\r\n
Do please send me a comment if you have anything to contribute to this.<\/p>\r\n\r\n
I’ve created a demo page here<\/a>, if you want to see this for yourself.<\/p>\r\n\r\n
Thanks to Benkus for his comment<\/a> suggesting including an additional div within the element – so the outer div has the fluid width and the inner div has overflow:auto – you can see this on the demo as well<\/p>","protected":false},"excerpt":{"rendered":"
I hit this issue building this website and can’t find much about it anywhere else. This manifests 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: […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-151","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/pages\/151","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/comments?post=151"}],"version-history":[{"count":0,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/pages\/151\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/media?parent=151"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}