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:

Answer 1

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;
}

Answer 2

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.