Home/ Questions/Q 7571645
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T15:43:23+00:00

I’ve found that an overflow:hidden div following a float:left div has doubled margin on

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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