Margin behavior of "overflow:hidden" div after floating div on webkit

Question

I've found that an "overflow:hidden" div following a "float:left" div has doubled margin on the right. This can be tested with following code:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.intro {
    border: 1px solid #DBDBDB;
    margin: 10px 0;
    padding: 10px 0;
}

div.intro>div {
    border: 1px solid #DBDBDB;
    height: 150px;
    margin: 0 10px;
}

div.brief {
    float: left;
    width: 150px;
}

div.list {
    overflow: hidden;
}
</style>
</head>
<body>
<div class="intro">
    <div class="brief"></div>
    <div class="list"></div>
</div>
</body>
</html>

The space between right border of div.list and right border of div.intro is 20px in chrome(17.0.963.56 m) and safari(5.1.2), while being 10px in Firefox(11.0) and IE9.

Is this a bug of webkit or just an undefined preference of css?

Thanks!

I tested here on Windows 7 32bit, latest version of Chrome and Safari and it all works fine, strangely enough! — Bram Vanroy, Feb 28 '12 at 09:59
I've tested again on several computers(including a mac)that the div.list does have a doubled margin-right on chrome(**17.0.963.56 m**) and safari(5.1.2). But in a beta version, Chrome **19**, the problem doesn't exist. @BramVanroy could you have a try on this version? Thanks! — rhgb, Feb 29 '12 at 06:50

score 1 · Accepted Answer · answered Feb 29 '12 at 07:19

I was able to reproduce this on Chrome for Mac, 17.0.963.56.

The problem stems from the fact you've given #brief and #list a height, but haven't contained the float. There actually isn't a double margin; the margin-right of 10px is combining with .intro's 10px padding-right to give the allusion of a 20px double-margin.

All things considered, the fact the WebKit (Chrome's & Safari's renderer), rendered things that way is a little strange.

Everything worked as expected with this CSS (see the Fiddle):

.intro {
    margin: 0 0 20px;
    padding: 20px;
    background: #FFA;
    overflow: auto;
    height: 100%;
}
.brief {
    background: rgba(255, 0, 0, 0.25);
    width: 150px;
    float: left;
}
.list {
    background: rgba(0, 0, 255, 0.25);
    margin: 0 0 0 170px;
}

Thanks for your explanation. You said "_the margin-right of 10px is combining with .intro's 10px padding-right_", that I guess it's actually "_combining with .brief's margin-right_", is that right? — rhgb, Feb 29 '12 at 08:34

score 0 · Answer 2 · answered Feb 29 '12 at 07:44

The above solution seems to do the trick as long as the width of your floating element is static and predictable (as the margin of the non-floating div is set to span the floating div's width, plus the required space between the two).

If, however, you're working with a floating div with a dynamic width, you can target what appears to be a Webkit-specific issue with a -webkit-margin-start property which all other browsers will ignore:

.div.list {
    overflow: hidden;
    -webkit-margin-start: 0px !important; /* you can ditch the 'important' by adding 'div.intro' to the front of your selector */
}

This effectively sets div.list's margin-left: 0 in Webkit only, while accommodating a dynamic width for your floating div. Unfortunately, I haven't been able to test this in Chrome 19b yet, so I'm not sure how it'll handle this kludge.

Thanks for the solution. Seems that directly adding `margin-left: 0;` to `div.list` will not affect layout in FF and others. — rhgb, Feb 29 '12 at 08:43

Margin behavior of "overflow:hidden" div after floating div on webkit

2 Answers2

Linked