Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

How to create sidebar with CSS?

I want to create a website with a sidebar to the left (similar to Treehouse's) and all the content to the right that scrolls with the page while the sidebar remains static throughout.

I tried with

.sidebar { min-height: 100vh; }

but when the content to the right goes beyond the viewport and I scroll, the sidebar also scrolls.

Any help would be greatly appreciated!

2 Answers

Kallil Belmonte
Kallil Belmonte
35,559 Points

I made this experiment, see if that works for you: https://codepen.io/anon/pen/oxZeqx

Hi Kallil,

Thank you very much for your help! Now the sidebar is fixed, but the content to the right is also now fixed and doesn't scroll. I want the wrapper to contain a lot of information so to be able to scroll up and down, but at the same time the sidebar to remain static while the wrapper scrolls. Just like the Treehouse site's design.

Kallil Belmonte
Kallil Belmonte
35,559 Points

Hi Stephen, sorry for the delay, the code that I provided is not with the main container fixed, at least I did scroll it, the box has 2000px of height, and if you add a margin-bottom of 30px for example, it will separate from the bottom.

I took a print showing the scroll bar: http://i.imgur.com/LSlEsri.jpg

Hi Kallil,

Yes, it works. Thanks for your help!