Question

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 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:

spl_aside:

spl_main:

Answer 1

An alternate solution could be to use inline-blocks. How you implement this does depend on what browser support you need though. Leaving my suggestion in a fiddle.