CODEWITHSUNDEEP
csslayouthtmlsticky-footeroverlapping
krembo99
krembo99

Reputation: 1479

Css layout - overlapping divs

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/

Upvotes: 1

Views: 1689

Answers (2)

Mike
Mike

Reputation: 11

Kim is right. Make div id="sidebar" float:right, and make div id="main" overflow:hidden

div id="main" will then resize to your floated elements as though it had float:left

Upvotes: 1

Kimtho6
Kimtho6

Reputation: 6184

You can use float:right instead of position absolute

sample

Upvotes: 2

Related Questions