-The content area is 960px. Some of the images (Cursive title in header, left slider box, right search box) need to be flush on the edges of the content area but the shadows should extend over.
My solution was to make the content area bigger and then add padding to keep the content within the 960 and then use a negative margin to pull the image + shadow back to flush.
While this works, I feel like it is not the ideal solution. What are best practices here?
-The main content area consists of three divs. I am trying to move the content in #mc-mid up without overlapping the #mc-top background. In other words, I want all of the content to be held #mc-mid but appear on top of the #mc-top, #mc-mid, and #mc-bot backgrounds.
What you are doing with the negative margin seems fine to me.
As for the overlapping divs, go for nested divs instead. It would be better to have a repeating background along the top of mainContent and have a div nested within that that has the bottom image repeating across the bottom. Then have the main content within both of them it its own div. Overlapping divs is the wrong way to go.
Thanks for the response Ralph. I’ve been messing with your suggestion for about an hour but still cannot get it right. Could you or someone else please give me some sample code to work with
Again, what I am trying to do is have the content overlap both top and bottom background images that make up the content area. The div where the content is stored should have a solid color BG and adjust based on the length of the content.
OK, what you are doing is not quite what I was suggesting.
Firstly, move the contenttop image to the mainContent div as a background.
Then remove mc-top and mc-bottom, and place the content bot image as a background image on mc-mid (which you might want to rename). Have that image repeat along the bottom of mc-mid.