Date: 09/11/07 (WebDesign)    Keywords: browser, html

So here's the deal: I've only recently nixed tables, etc. in favor of 100% div-based layout. I'm trying to do something and I'm not sure if it's 100% possible and I'm dumb for not knowing how, or just not something that's doable in a fully browser-compatible way.

The site (still under construction, so please don't criticize the obvious big flaws at the moment! I'm aware and fixing them :) is www.sweetcarolinesnyc.com. Specifically, go to www.sweetcarolinesnyc.com/about.html, because that's where my issue comes into play.

So, a few things about this site: I've set a background image with the top piano/logo banner built into it. You'll notice that at the bottom, I also have a fixed-position address/contact info bar.

You'll also see that when that main content div exceeds the available screenspace, scrolling kind of makes the site messy. The top content of the div scrolls up over my title and piano keys, and the bottom of the content scrolls along under my fixed bottom gif, making it impossible to read.

I've considered a few workaround fixes: nixing the background image and making it two sliced, absolute-positioned images, the top part with a z-index of 2 and the bottom part with a z-index of -1. And giving up on the fixed positioning of my bottom bar and just allowing it to hang out at the bottom of the content waiting for someone to scroll to it. Or, setting a set height for my content div and accepting a small auto-scrollbar inside the page for when content is too big.

But what I'm wondering: is there a way to have this page set up the way I really WANT it set up, without the bugs? In other words--the background image to stay a background image, my fixed bottom gif staying fixed, and the main page scrollbar controlling ONLY that main, moveable content. Am I dreaming? (Or am I just dumb and missing something obvious?)

Thoughts?

Source: http://community.livejournal.com/webdesign/1308252.html