HTML/CSS/jQuery - can I hide scrollable text behind an invisible box?
I've got your average two column layout, but with a bit of a twist. 

The header and the left column have the property position: fixed. The right-hand column is basically the only thing that moves.  The header has the width of the page. All elements have a transparent background, sitting above a [supersized](http://www.buildinternet.com/project/supersized/) background image. This works great and looks good apart from one problem.

When the right column scrolls up, it comes under the header's contents, which looks awful. Ideally, the right-hand column would get cut off by the header. But there's to be no background on the header. I could make a wrapper for the right-hand column and fix it in position, and use overflow-auto to scroll within that, but I need the page itself to be scrollable. Lastly, I can't just cut out a bit of the background image and give it to the header, because the background moves behind the elements independently.

This is what I'm using for the right-hand column at the moment:

	margin-top: 250px;
	margin-left: 380px;
	float: left;
	width: 560px;

I'm open to any suggestions that don't violate those principles. I'm not afraid of using jQuery or another JS solution. This Is Impossible is also an answer, but I'd rather it not be.

Thanks guys!

tl;dr: Can you cut off the top of a scrollable column?
HTML/CSS/jQuery - can I hide scrollable text behind an invisible box?
===

I've got your average two column layout, but with a bit of a twist. 

The header and the left column have the property position: fixed. The right-hand column is basically the only thing that moves.  The header has the width of the page. All elements have a transparent background, sitting above a [supersized](http://www.buildinternet.com/project/supersized/) background image. This works great and looks good apart from one problem.

When the right column scrolls up, it comes under the header's contents, which looks awful. Ideally, the right-hand column would get cut off by the header. But there's to be no background on the header. I could make a wrapper for the right-hand column and fix it in position, and use overflow-auto to scroll within that, but I need the page itself to be scrollable. Lastly, I can't just cut out a bit of the background image and give it to the header, because the background moves behind the elements independently.

This is what I'm using for the right-hand column at the moment:

	margin-top: 250px;
	margin-left: 380px;
	float: left;
	width: 560px;

I'm open to any suggestions that don't violate those principles. I'm not afraid of using jQuery or another JS solution. This Is Impossible is also an answer, but I'd rather it not be.

Thanks guys!

tl;dr: Can you cut off the top of a scrollable column?