Fluid Shadows

#contain-one {

	padding: 0 0 0 69px;

	min-width: 650px;

	background: #fff url(images/bshad_left.gif) repeat-y;

}

#contain-two {

	padding: 0 69px 20px 0;

	background: #fff url(images/bshad_right.gif) repeat-y top right;

	height: 900px;

}

Original article posted June 20th, 2004

This is probably one of the more easier CSS tricks I will show you, but it is said to be interesting enough to post about anyway.

We've all seen drop shadows for borders on web sites. Dan, Matt, Shaun, Cameron, and myself all use them. It has even been said by some that it is overdone, I say nevah!

There is one thing in common with all of these sites, they are all fixed width. Not fluid, meaning the content holders don't resize when the user resizes their browser. The problem is most implementations of the shadows are done in the body tag with a background that is fixed centered, or left in the case of this site. As it stands now, the background property in CSS is not resizable, nor can you apply a left and right background separately like borders. I think the W3C supports some solutions for this problem in CSS version 3, but until CSS3 becomes mainstream, we'll have to use this solution.

My solution is very easy to implement, and the concept is easy to understand. It consists of two div's overlapping one another, each holding one part of the background. The following diagram will help me explain what is done.

First, #contain-one has the left shadow image, and has a left padding of 69 pixels to push the contents within over past the background. Second, #contain-two sits within #contain-one and has the right shadow image, and has a right padding of 69 pixels to push the contents over as well.

There is one known drawback to using this. If the content is shorter than the window, the background stops. Unlike a background in the body that continues all the way down, when the content stops, so does the div, and consequently so does the background. You can always add a height to #contain-two to push it down, but it's a dirty way of doing it.