Неожиданная маржа в браузерах Webkit

У меня проблема с 2-колоночным, плавным макетом. Оба столбца находятся внутри div (.dp_stage_sizer) с overflow: auto; .spl_aside смещается влево, spl_main — это просто старый добрый position: relative с margin-left.

Это работает нормально, пока я использую значения в пикселях для ширины и поля, но поскольку этот сайт должен быть плавным (в любом случае, ниже определенной ширины окна), все, кроме ширины .dp_stage_sizer, указывается в процентах. Это приводит к тому, что у spl_main появляется дополнительное поле с правой стороны, так что оно не совпадает с его родительским элементом, а только в браузерах Webkit (хотя поле НАМНОГО больше в Safari, чем в Chrome). .

Ниже приведен код в настолько очищенной версии, насколько мне удалось:

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

И, наконец, JSFiddle для тех, кто хочет поэкспериментировать.

Ниже приведены изображения, сделанные с помощью веб-инспектора Chrome, на которых показаны поля каждого из трех элементов div:

dp_stage_sizer:

spl_aside:

spl_main: