Centered page layout with two sidebars

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.

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.