I'm making a website for a small local bookstore. I designed the layout but a problem arises with the background area when the content extends beyond the length of the left menu and upper-right background image. Since the three separate sections have different backgrounds and the backgrounds are not solid colors, I can't extend them seamlessly or simultaneously. It occured to me that the only way to keep the current layout and have it be functional would be to incorporate it into frames so that only the content area scrolls.

Normally I avoid frames so I looked for help on lissaexplains and it said that frames should be avoided and that the same thing could be accomplished with css. So I tried recreating the page in CSS but obviously it isn't quite like frames and I have the same problem.

This is the original layout:
http://www.relativelyhuman.com/bkpr/bkkpr.html

You can see the problem if you click "books" and then any link in the menu and scroll down.

This is the page in CSS:
http://www.relativelyhuman.com/bkpr/csslayout.html

Right now the content area in CSS is set to match the height of the left menu to eliminate the empty background space.

Is there any way to attribute individual backgrounds to the separate divs in CSS or to have only the content div scroll as it would in a frame? Or do I need to go back to my original idea of using frames?

Input would be very much appreciated, especially as I have a deadline.
Thanks!

You can make a DIV layer have a different background by using id="name" in the code.


#name {
background-image:url(http://becky.sweet-toffee.org/skins/10/cars_main_01.jpg);
}


If that's what you are looking for...

And as for scrolling DIV's


<div style="background: #ffffff; overflow: auto; width:200px; height:150px;">All your content, images and things go here</div>


Obviously you can specify the look through the style sheet.

I hope that helped you. ;)