Margin:auto quirk in Netscape 6+ | October 3, 2003

Thanks to Gus Campbell for spotting this issue. When centering an div using margin:auto, in Netscape 6+, if you reduce the screen width to less than the width of the div, you get a negative margin on the left hand side of the screen. This renders your site unusable for people on small monitors as it's impossible to read the text falling off the left had side of the page.

Gus did some poking around and found that setting a minimum width on the body tag would combat this problem. He also believes that, rather than being a bug, this is actually the recommended behavior.

I must admit this is a new one on me. I did a bit of googling but couldn't find this mentioned anywhere. Is this a new issue or did I just forget to read the memo?

Posted at October 3, 2003 8:29 AM

Comments on: Margin:auto quirk in Netscape 6+

Jump to the comment form

speach bubble Comment

I found this problem with my site (http://exp.hicksdesign.co.uk/archives/000062.php)
It affected all gecko browsers, but then found the min-width fix on CSS Discuss, and all was well. The odd thing is, it doesn’t affect the auto margin sample on Blue Robot:

http://bluerobot.com/web/css/center1.html

Although this is a very simple layout - maybe its something to do with how elements are placed inside?

Posted by: Jon Hicks at October 3, 2003 8:55 AM

speach bubble Comment

It’s not a new problem, but I don’t think anyone ever got round to writing the memo - the closest I can find is Yoz Grahame’s ramblings on the subject: http://cheerleader.yoz.com/archives/000840.html

He found a slightly different fix involving 0px borders, but the min-width solution seems much more elegant

Posted by: paul hammond at October 3, 2003 10:35 AM

speach bubble Comment

Thanks Andy, it’s something I noticed recently on my site, I hadn’t been able to find a solution.
I can’t quite understand why this would be considered a ‘recommended behaviour’ though.

Posted by: Andy McCulloch at October 3, 2003 11:52 AM

speach bubble Comment

I ran into this a while back (http://www.bostream.nu/bereastreet/archive/200307.html#e0307301116) and, like Jon, found out about the min-width fix from the CSS Discuss list.

Posted by: Roger Johansson at October 3, 2003 9:38 PM

speach bubble Comment

i had a negative margin problem as well. i was setting the content width with: body { width: 500px; } with a left margin as well. on one of the pages there was a url which was wider than 500px, which caused the page to load about -200px or so off the view port. reset the body width a bit wider and everything was alright. weird way to handle that situation. it appeared only to be a problem in mozilla, although i don’t have a windows box handy to test such things.

just my two cents.

Posted by: Charles Stuart at October 4, 2003 9:27 AM