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


Tags: html,css,alignment,absolute,fluid-layout

Problem :

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.



Solution :

Add the following attribute.

#rightLayoutCol {
    right: 0;
}

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


    CSS Howto..

    How to hide a

    How to achieve multiple icon hover transitions over one image
    How to rotate and fade background images in and out with javascript/ASP.NET/CSS
    When I hover left/right side of a div how do I display previous/next button (using CSS/jQuery)
    How can I center using percentages?
    How to produce a green check mark on the menu tabs by using before and after selectors in css ?
    how to collapse navbar in twitter bootstrap after click on link if it woud be collapsed because of css? [closed]
    Dropdown list showing vertically in Internet explorer
    How to find number of style classes defined in a CSS file
    How to make header cover entire page length?
    Css flex-box - How to align a single item to the bottom while keeping the other items to the top
    How to have a css element with transitions except initially?
    How can I keep things aligned in an adaptive layout