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


Centered page layout with two sidebars

Okay, here's a little layout problem I have. It's a two sidebar layout with a header, a height of 100%, a maximum width of 1200 pixels and a center stage for content - a gallery, in this case. Here's a JSFiddle to how I've tried to solve this so far.

The biggest problem I have is how to define the grey center stage to be 100% minus the sidebars so that its content scales nicely and doesn't get covered by one of the sidebars when the window is resized.

Right now, I've solved this using the calc attribute, which I'd rather not use because it isn't really widely supported yet. Is there any way around this? Am I thinking of it the wrong way?

Any help or input would be greatly appreciated. Thanks!

3 Answers

Here you go Rino,

Here's a fork of your fiddle I made that should give you what you're looking for.

The method I used here was to apply padding on either side of #wrapper element that's the width of the two sidebars on either side. Then I applied negative margins to the sidebars to reset their position. I also applied negative margins to the header element to make sure it spans the full width of the #wrapper element.

I think I should've replied to your comment directly, I'm not sure how I didn't.

Awesome. Thanks, Tyson! It's not easy to think in margins and padding for layout when you're not used to it yet, but I think I'm starting to get the gist. You've been a great help.

Now, have a new problem that wasn't there before: The header's height is added to the 100% of the main area and pushes it down, so now I have a scrollbar for the whole page that I'd like to avoid. Just hiding the overflow won't help, because then I can't scroll down to the bottom of the gallery entirely.

I've tried to fix this by using a negative top margin on a new div with the "scrollfix" class, pushing the contents down to display them at their old vertical position and then use a z-index on the header to lay it on top. This removes the scrollbar, but now the scrollbar that's used to scroll through the gallery stretches all the way to the top beneath the header (see here). It's not a deal breaker but it's not pretty, either. Is there a better way around this particular problem I'm not seeing there?

Edit: I just thought of just adding bottom margin or padding to the .content class or the wrapper, but this doesn't seem to do anything.

Here's an update that should solve all those problems.

Since using padding and height combines the two values it can get really screwy when you are trying to do something like 100% height. In cases like this I recommend using absolute positioning with top: 0 and bottom: 0 while not specifying a height. That will mimic 100% height while still allowing to you add padding that doesn't add itself to the height. Hope that helps.

That did it - thank you so much for your help! You've helped me understand this quite a bit better, I really feel I've learned a lot. Fantastic :)