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

Best way to 'fix' a header panel to the right hand side of the screen

Hi everyone

I'm trying to create a website for a customer of mine who basically wants some featured articles to be 'fixed' on the right hand side of the screen and the main content to display on the left hand side of the screen. Both parts need to be scrollable up-and-down. It'll be a WordPress site but I have started coding it up on CodePen so you guys can have a look and offer pointers.

It can be found here --> https://codepen.io/JamesPaskUK/pen/QMybzZ

My questions are as follows please:

Firstly, how can I 'fix' the right hand pane so it takes up exactly 50% of the screen width for desktops (as you can see at the moment, there are gaps around its edges). Also, when I scroll down, I want both panels to be scrollable independently.

Second, how do I prevent content on the left hand side from going underneath it? (at the moment, both sides have 50% width so I would have imagined that the content would sit nicely side-by-side.

Finally, does the text look readable in its current format? i.e is the line height correct, spacing ok etc? (ignore the fact that it goes behind the right hand pane!). Also, can anyone see any issues with the HTML tags that I've used. I've chosen 'article' tags for the featured images and, because this is the main page, I have used the 'main' tag.

Look forward to receiving feedback.

I can only offer some quick tips due to being busy... but if you have 2 columns with width:50% you cannot add margins on your left and right also or it will break the 50%.

  • Your left pane had margin:10px. Either remove this or make it margin:10px 0;

I would also have the left content before the right content in your html order. Sorry I can't be of more assistance right now. Good luck.

2 Answers

Ian Evans
PLUS
Ian Evans
Courses Plus Student 978 Points

Ahh, the joys of position: fixed. I have it mostly working here:

https://codepen.io/icevans/pen/jLWBdw

The critical things were subtracting your left-panel's left and right padding from its width using calc (40px because you had 20 left padding and 20 right), and then implicitly setting the width of the right panel by giving it left: 50%; right: 1rem (right:1rem is because you have body padding of 1rem). I also had to set margin: 0 to body, because user-agent styles were adding 8px margin around your body that was screwing up the calculations. If you add padding back to your left column, be sure to remove that same amount from the width using calc. I guess you could leave the margins and add the 8px to the calc.

To get the overflow scrolling to work, you just give bottom: 0 to the fixed position element. There's a stackoverflow thread on that.

Assuming your header could have variable height, there's no real way in CSS to tell the right-panel to stay positioned just under the header (assuming that's what you want). But a quick bit of jQuery gets the calculated height of the header and set the top property of the right-panel to that many pixels. The '+ 8' is to take into account the body padding. This could be more elegant, but you get the idea. You could add some more jQuery to make the top go up as the user scrolls the header out of view, until you hit the top of the viewport.

A quick note on z-index: I see you applied it to the left-panel. Z-index only effects positioned elements (i.e., absolute, relative, or fixed) and since you didn't specify a position property for left-panel, the z-index has no effect. You could set left-panel to position: relative if you end up needing the z-index for some purpose.

That's a pretty tricky layout, I hope this helps! Line-height and whatnot in the main content looks fine to me. Article. tags for featured images strike me as odd — I would just use divs there.

Ian Evans
Ian Evans
Courses Plus Student 978 Points

I agree with Alexander that right-panel should come after left in the source order, mainly for the sake of screen readers.

This is awesome. You've given me some good pointers here and its nice to know that I was sort of heading in the right direction even though some of it was a bit muddled. I appreciate that its a difficult layout by this particular customer does like to give me a headache.

Steven Parker
Steven Parker
215,959 Points

Here's what occurred to me:

  • re-arrange HTML so everything on the left can be enclosed in a common container
  • move the left-panel class to that container
  • remove margins from outer containers
  • set everything to "box-sizing: border-box"
  • set the height of both panels to 100% (or 100vh)
  • give the left panel "overflow-y: scroll" like the right has
  • set both panels "position: fixed"
  • set left panel "left: 0"

If I haven't overlooked anything, that should place both panels side-by-side without overlap and give them both independent scrolling. I think the main difference you'd see from what Ian is suggesting is the placement of the scroll bars. This technique would give each panel it's own, and the other makes the left panel respond to the main page scroll bar, which will appear to the right of the right panel (and its scroll bar).

Thanks Steven, I will have a play about and see what works best.