Question

I have a really stuburn layout, that I just can not resolve ..

- Left column - Fixed,Static (always in view)
- Right column - Fluid/liquid/scrollable
--- Header - fixed 
--- left/main fluid/liquid
--- Right/sidebar - fixed width
--- footer

(if the above is not clear – header,left/main,right/sidebar,footer are INSIDE the right column)

now, this layout sort of working ,

<div id="left-col">left col</div>

<div id="container">

    <div id="header">header</div>
    <div id="main">
        <div id="sidebar">sidebar</div>
        main
    </div>
    <div id="footer">footer</div>
</div>

#left-col {
    width: 50px;
    position: fixed;
    background: yellow;
    left: 0;
    top: 0;
}
#container {
    margin-left: 50px;
    background: black;
}
#header {
    background: green;
}
#main {
    background: blue;
    position: relative;
}
#sidebar {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    background: pink;
}
#footer {
    background: red;
}

but still I have one annoying problem –
when the main content is not long enough – the sidebar and the footer are overlapping ..
That is because the sidebar is : absolute positioned – but then again, If i make it relative, and the page is being re-sized, the sidebar goes UNDER the main … (not enough space for fluid …)
so , my question is this ,
Anyone has an Idea how to keep the footer UNDER the sidebar ? (jQuery sticky tricks not working, and CSS tricks are quite tricky here..)
or any other ides to achieve this layout ?

JSFIDDLE: http://jsfiddle.net/VNU6Z/

Answer 1

You can use float:right instead of position absolute

sample