Please see the screenshot. I am trying to produce a layout that allows me to apply shadow to either side of the main div using the divs left (headerLeft) and right(headerRight), I then have the content div(header) that holds the header content. This is all wrapped in a div (headerWrapper). I am using 4 divs to do this. I have it working on my header, nav bar and another bar I am using. This is shown with the colour coded divs on the screenshot. The reason this works is because my CSS is using heights given in pixels. However I have problem. I want to apply this to my main content, but it won't work. The content is going to change in height from page to page this is fine, however my divs that contain the shadows don't appear, unless I give them a fixed pixel height. Please help.The red areas show where the left and right divs containing the shadows should appear.

Could you post your html as well, please? Or link to your demo-page/page-in-progress? I can sort of see what the CSS is doing, but it's difficult to be sure without seeing to what it's attached. Cheers =]
–
David ThomasAug 13 '09 at 17:20

2 Answers
2

I would use a transparent PNG for the shadow, 1px high. It would contain the shadow on the left, then a blank area the width of the content/header, then the right hand shadow. In the example below this would be 1x932 pixels.

For the different background colours on the header/body, you'll either need to add an extra div inside the shadow (around the content), or create multiple shadow images where the blank bit in the middle contains the correct background color. However if you're filling the header with a separate image anyway you could probably get away with just the body color - the header will cover that up.

Getting divs to match heights is very hard to do with CSS. There are some tricks to doing it, but I think there's an easier solution here.

Why not just make the red pattern the body background image and have it tile? If you want to display something else, just have it go on top. From what I can see of your design, that looks like the easiest solution to me.

If you do want to try to get the divs to match heights, I'd suggest using the absolute columns trick. Something like this will work, I think: (Although I haven't actually tested it.)