css how to align absolute positioned child element to the right of fluid width parent

Question

I'm trying to put some background images that are part of my layout to the left and the right of my main content div.

This is the jsfiddle, as you can see giving the element a right margin of 0px doesn't affect the layout, giving it a left margin affects the layout, but since the width is variable I can't know the width of the wrapper div beforehand (without using Javascript which I don't want to).

css

 #wrapper {
    position: fixed;
    width: 85%;
    margin: 0 auto;
    padding: 0px 30px 0px 30px;
    overflow: auto;
    background-color: grey;
}

#leftLayoutCol {
    position: absolute;
    height: 100%;
    width: 30px;
    margin-left: -30px;
    background-color: green;
}

#rightLayoutCol {
    position: absolute;
    height: 100%;
    width: 30px;
    background-color: lightgreen;
    margin-right: 0px;
}

#main {
   padding: 0px 50px 0px 50px;
   background-color: lightgrey;
}

html

<div id="wrapper">
    <div id="leftLayoutCol">
    </div>
    <div id="rightLayoutCol">
    </div>
    <div id="main">
        <h1>TEST</h1>
        <h1>TEST</h1>
        <h1>TEST</h1>
        <h1>TEST</h1>
        <h1>TEST</h1>
    </div>
</div>

Any suggestions?

Thanks.

Answer 1

Add the following attribute.

#rightLayoutCol {
    right: 0;
}

Since #wrapper is position: fixed it already gives a new positioning context.