CODEWITHSUNDEEP
htmlcsssidebarsticky-footer
SuperTron
SuperTron

Reputation: 4233

CSS - Sticky footer + Sidebar Problems

I am having some trouble with the layout of a website that has a header, content, "sticky" footer, and a sidebar. The sticky footer, header and content combination is not a problem by itself, but I can't for the life of me figure out how to add a sidebar that goes from the header right down to the footer without messing up the "stickyness" of the footer.

The way I am approaching it now involves absolute positioning. I basically make a header div (height: 71px; top: 0px;), a footer div (bottom: 0px; height: 30px;), and a content div (top:71px;bottom:30px;). I then float the sidebar left inside the content div and make its height 100%, and add another div (call it "view") next to it for the actual site content. This makes sure the sidebar is nicely from the top to the bottom, and the footer is normally at the bottom of the page.

However, problems arise with this approach when the window is resized, especially so when the content is too large to fit in the "view" div itself. This results in the footer cutting off the content, and scrolling down makes the footer move up in the window. I would like to achieve a footer that behaves like this, but also have a sidebar that ALWAYS stretches from the header to the footer of the page.

If anyone could think of a way to add a such a sidebar to the page linked above or has any ideas on how I could go about tackling this problem, it would be greatly appreciated. Thanks beforehand.

Upvotes: 0

Views: 1401

Answers (2)

jeremysawesome
jeremysawesome

Reputation: 7254

You can always put an overflow: auto on your view div.

http://jsfiddle.net/dzRZd/

Edit:

With fixed positioning instead: http://jsfiddle.net/ekSvQ/2/

Upvotes: 0

Josh Allen
Josh Allen

Reputation: 997

Do you think you could post some example HTML and CSS you have besides just the div height and positioning?

What I was thinking is you could throw another <div> inside the sidebar <div> and set the margin-bottom or padding-bottom to 30px. I'll work on a jsFiddle for you.

Upvotes: 1

Related Questions