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