I'm struggling with a stubborn layout issue that I just can't seem to figure out...
- 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)
My current layout seems to be somewhat functional,
<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;
}
However, I am encountering one frustrating issue - when the main content is not long enough, the sidebar and footer end up overlapping... This is because the sidebar is absolutely positioned. If I make it relatively positioned and resize the page, the sidebar goes under the main content due to lack of space for fluidity. So, my question is, Does anyone have an idea on how to keep the footer UNDER the sidebar? (jQuery sticky tricks aren't effective and CSS workarounds are proving to be quite challenging...) or any other suggestions on achieving this layout?
JSFIDDLE: http://jsfiddle.net/VNU6Z/