I'm having an issue with a 2-column, fluid layout. Both columns are inside of a div (`.dp_stage_sizer`) with `overflow: auto`; `.spl_aside` is floated to the left, `spl_main` is just plain-old `position: relative` with a `margin-left`.

This works fine so long as I use pixel values for width and margin, but as this site is to be fluid (below a certain window width, anyway) everything except the width of `.dp_stage_sizer` is in percents. This causes `spl_main` to sprout an extra margin on its right side, so that it doesn't line up with its parent element, but *only* in Webkit browsers (although the margin is MUCH larger in Safari than Chrome).

Below is the code in as distilled a version as I could manage:

HTML:

```
<div class="dp_stage_sizer">
    <div class = "spl_aside">
        aside
    </div>
    <div class = "spl_main">
        main
    </div>
</div>

```

CSS:

```
div.dp_stage_sizer
{
    position: relative;
    max-width: 1080px;
    margin: 0px auto;
    overflow: auto;

    background-color: silver;
}

.spl_main
{
    position: relative;
    margin: 0% 0% 0% 30%;
    overflow: hidden;

    background-color: green;
    height: 400px;
}

.spl_aside
{
    position: relative;
    float: left;
    width: 20%;
    overflow: hidden;

    background-color: red;
    height: 300px;
}

```

And finally a [JSFiddle](http://jsfiddle.net/PacmanBits/AZFVU/1/) for anyone who wants to experiment.

---

Below are images taken using Chrome's web inspector, showing the margins of each of the three divs:

`dp_stage_sizer`:
![margins for <code>dp_stage_sizer</code>](https://i.stack.imgur.com/Wxnbg.png)

`spl_aside`:
![margins for <code>spl_aside</code>](https://i.stack.imgur.com/Ni9jS.png)

`spl_main`:
![margins for <code>spl_main</code>](https://i.stack.imgur.com/j5b3z.png)