Why there is an unintended margin-right in Safari5?

Question

I am curious about an odd rendering behaviour on Safari 5.1. In a two-column layout, the first column has a fixed width, and the second one should take the remaining part.

HTML:

<div class="row">
    <div class="left">
        <p>Left</p>
    </div>
    <div class="right">
        <p>Right. Some more text here, to show how odd the line breaks...</p>
    </div>
</div>

CSS:

.row { width: 300px; background: yellow; overflow: hidden; }
.left { width: 100px; background: red; float: left; }
.right { margin-left: 100px; background: green; overflow: hidden; }

This works great on most browsers (on all "modern" browsers, as I thought), but now I found out, that Safari 5 adds an unintended right margin on the second column of the same width as the intended left margin (as if there were a .right { margin-right: 100px; } rule).

http://jsfiddle.net/MvF3V/1

Most Browsers:

Safari5: (tested on 5.1.7, but it occurs also on 5.1.9)

When I remove the overflow: hidden; it works fine, but I need that for other inside elements.

My questions is not how to rearrange this little example, but:

1. Is this a Safari-5-Bug, or are my CSS rules somehow wrong, even if they "work" on most browsers?
2. If it is a Bug, does it have a name, with which I can google some workarounds?
3. Can I detect somehow, which Browsers are affected with this behaviour, to define some exception rules for them.

Update: The standard Android browser (Galaxy S3, AppleWebKit 534.30) seems to use the same old webkit engine. The same strange right margin appears: http://jsfiddle.net/MvF3V/1/embedded/result/

Answer 1

This seems indeed to be a bug in older Webkit versions. I found another question about the same issue.

There are workarounds. The most obvious is to avoid overflow: hidden to clear floats, and to use clearfix instead.

Since nobody answered to my questions, I try to give them myself:

Is this a Safari-5-Bug?

It's a Webkit Bug

If it is a Bug, does it have a name, with which I can google some workarounds?

No name found, apparently there are not many people who layout websites as I do... (and still want to support old browsers).

Can I detect somehow, which Browsers are affected with this behaviour, to define some exception rules for them.

If you really want to define exceptions, you can make such ugly things in JavaScript

var webkitCheck = /AppleWebKit\/([0-9.]+)/.exec(navigator.userAgent);
if (webkitCheck) {
    var webkitVersion = parseFloat(webkitCheck[1]);
    if (webkitVersion < 535) {
        jQuery('html').addClass('oldWebkit');
    }
}

< 535, because 534.59.10 is the Webkit version of the latest Safari5 version, and in Safari6, this bug does not occur anymore.

But thanks, @Era and @NoobEditor for your comments.

Answer 2

Give a

padding-left: 100px;

instead of

margin-left: 100px;