Google Chrome widens by one pixel a partly offscreen div
css, css-float, google-chrome
Solution
The issue is being caused by the fact that you have your `#header_left` object and your `#header_right` object pushing out past the edges of the center line with negative margin - but the center piece having a horizontal `margin` set to `auto`.
What's happening is that when the `body` is an even number of pixels wide - `auto` makes the `#header`, which is `1016px` wide, center with an even number of pixels on either side, due to the `margin: 0 auto;` (example: if body is `1200px` wide, there are `184px` available, so the browser allocates `92px` on the left, and `92px` on the right. Your `#header_left`, then, gets a `margin-left: -140px;` rule - which puts it `140px` to the left of the left-edge of the `#header`, and it lines up pixel-perfect.
When the `body` is an odd number of pixels wide, however, say `1199px` - and the `margin: 0 auto;` kicks in, a partial pixel is allocated (in this case yielding only `91.5px` per side). Because an object can't be drawn in half a pixel - the browser rounds up for the actual location at which to start rendering `#header` - and the left-edge is calculated at `91.5px`. When your margin then goes `-140px` on the `#header_left` element, you wind up on another odd pixel - but this time, the calculation rounds down. (The internal math is probably calculated by first rounding - then subtracting).
This gives you the appearance of 1 pixel off...
The fix - in your scenario - is to change your `#header_left`'s `margin-left` CSS rule to `-139px` instead of `140px` - and allow a slight overlap. I've tested it with your actual site - and it looks fine and blends nicely.
So - in answer to your question - no - this is not a bug, per-se - it just means that the developer tools and the elements pane calculate differently. One of them rounds up and one rounds down when dealing with partial pixels. Or perhaps one is measuring what is actually rendered effectively on the screen, and the other measures what the CSS rules are indicating.
Problem
I wrote two years ago a design: the goal was to fit in a 1024px screen, but have a bit of extra graphical content so that it doesn't appear to be too small on larger screens. The result is http://megaglest.org/, the website of an open source project. Here's the HTML: I don't want to use an img tag since it will enable me to work on a responsive design where such images won't be loaded: ``` <div id='all'> <div id="header"> <div id="header_left"></div> </div> </div> ``` Here's the corresponding CSS: ``` #all { width: 1016px; margin: 0 auto; } #header { height: 313px; background-color: #4dd; } #header_left { float: left; width: 140px; margin-left: -140px; height: 379px; /* works fine */ /* background: #dd4; */ /* there's a one pixel offet */ background: url("http://megaglest.org/uploads/megaglest2011/header/left.jpg") no-repeat; } ``` Only on Google Chrome (22.0.1229.94 on Linux), and only at certain window sizes (when only part of #header_left is visible), I get an offset one pixel between the image and the blue header. It's possible to see using this jsFiddle when the "result pane" is very wide: http://jsfiddle.net/hTbJA/ Here's a screenshot of the issue. What's weird is that the Google Chrome developer tools say in "metrics" that the div is 140px wide, but then when I use the "Elements" pane and hover #header_left, it says 141px! Could it be a browser bug? Thanks.