I bet someone knows the answer to this pickle I've got myself in!

[batikdruid]

Thought I was so smart - made a design with a nice gray box for content, etc.

/*----- THE GRAY BOX -------*/
#midbox {
margin: -35px 32px 0px 30px;
padding: 20px 16px 16px 18px;
width: 502px;
background-position: 100% 0px;
background-color: #eeeeee;
fill:#cccccc;
border: 1px #d3e3f0 solid;
z-index:2;
}

Then I made the lovely shadows the go down the right side and bottom. Do you smart people already know what I'm going to say?

#extraDiv2 {
position: absolute;
margin: 228px 0px 0px 651px;
background: url(images/dshad.gif) repeat-y;
width: 11px;
height: 411px;
z-index: 1;
}
That's just the one on the right side - problem is I need it to correspond with the gray box height - even as the height differs on different pages. For example, on my index page it worked well with the 411px height of my shadow, but on another page there isn't as much content in the box, so box is smaller. So I can't use this div with a static height.
Is there a way to put these divs so that they FOLLOW the #midbox no matter what size it ends up??

(I also have a lil rounded corner shadow gif that has to come along with the gang too!)

Thanks in advance for your professional help! I hope I made it clear enough, I tried to keep it simple sounding. Just let me know if you need more info.

Thanks!

[Hierophant]

http://www.alistapart.com/articles/onionskin/

[batikdruid]

Thanks - I knew there was a place somewhere - I am looking around now for similar things. I did that one, and cannot find one thing wrong or missing in the css and code, but it is NOT working for me. However, on a related page, I may have found something that will work. I am hoping so, and thanks for your quick response.