Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
James Pask
13,600 PointsBest 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.
2 Answers
Ian Evans
Courses Plus Student 978 PointsAhh, 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
Courses Plus Student 978 PointsI agree with Alexander that right-panel should come after left in the source order, mainly for the sake of screen readers.
James Pask
13,600 PointsThis 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
229,744 PointsHere'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).
James Pask
13,600 PointsThanks Steven, I will have a play about and see what works best.
Alexander Mackenzie
10,542 PointsAlexander Mackenzie
10,542 PointsI 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%.
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.