Hi

I have a basic 3 column layout

Left Content Right

The left and right columns simply contain a background drop shadow image that I want to snap to the sides of the content.

I have 2 problems

1. The left background image is flush with the left of the screen, I want it to be flush to the left side of the content div. I can make this work with margin-left:200px; but i;m worried this will break on a different screen res, it needs to be positioned relative to the content I think.

2. Same as 1 my right background appears flush to the right edge of the screen, but also below everything else, i.e. it begins vertically when the content area finishes.

Any help appreciated

Thanks

It's difficult to see exactly what you are getting at without a link or at least the code you are using.

But from what you say and assuming your content is a fixed width make an image that has a drop shadow either side and the distance between them the width you want your content to be. Then adjust the width to take account of the drop shadow and use it as a background to the content but only repeating in the y axis.

I would suggest something a bit simpler - make ONE image that repeats vertically for your background that INCLUDES the drop shadow rather than making 2 divs just for the shadows.

The left background image is flush with the left of the screen

Assuming you are floating it left, it's doing exactly what you told it to do - same for the right.

My other suggestion, if you just have to use divs just for shadows, would be to add another 'wrapper' div that's just the shadow widths wider than your main div.