1

I've come across a bug in Chrome in the following situation:

  • Two block elements (we'll call them #rail and #well)
  • #rail is floated left
  • #well is not floated, has an overflow set (hidden or auto), and a left margin set.

What I'm observing is that, in Chrome, #well is not as wide as it should be. From playing with the different widths, it appears that Chrome is calculating the width of the #well as if neither the margin, nor the available space it inhabits, exists. Here's a reduction:

<html>
    <head>
        <style type="text/css">
            body {
                width: 1000px;
                font-size: 2em;
                color: white;
            }

            #container {
                background-color: green;
            }

            #rail {
                float: left;
                width: 100px;
                background-color: blue;
            }

            #well {
                overflow: hidden;
                margin-left: 500px;
                background-color: red;
            }
        </style>
    </head>

    <body>
        <div id="container">
            <div id="rail">RAIL</div>
            <div id="well">WELL</div>
        </div>
    </body>
</html>

Screen shots of the reduction in Chrome and Firefox attached. In Firefox, it's as expected -- 100px of #rail, then 400px of margin, then 500px of #well.

So I'm wondering if anyone's seen this before and, if so, whether there's a known workaround. Here's why I have this combination of properties:

  1. The #well contains floated content that I'd like for it to wrap, hence the overflow.
  2. The #rail may or may not exist on the page, hence the left margin on the #well.

Many thanks for any pointers!

Here it is in Firefox:

Firefox

And in Chrome:

Chrome

Nicolas Kaiser
  • 1,628
  • 2
  • 14
  • 26
outoftime
  • 2,190
  • 1
  • 16
  • 17
  • possibly related: http://stackoverflow.com/questions/9478978/margin-behavior-of-overflowhidden-div-after-floating-div-on-webkit – Timo Huovinen Mar 16 '12 at 11:47

1 Answers1

1

Try adding margin-right:-500px to #well

I had the same problem and your reduction helped me solve it.

coffeeworks
  • 91
  • 2
  • Well, this works if you know how much width ´#well´ shall have, but then you will not have that problem anyway, because you can just set the width... or am I missiong something? I am having problems with this as well, because I need the width to be set right dynamically, because I have several elements with different contents, which are floating. – SamiSalami Oct 08 '12 at 11:16