I have an issue on a site I’m working on. I have a left side banner/background that I need to span the complete height less the top 136px. How I’ve tried implementing this right now is a page container with a div within that is positioned left with a width of 50% and height of 100%. This works great except when scrolling down in the browser it doesn’t continue.
Sorry, that worked for me, but then there is nothing to scroll on my monitor. :)
I admit defeat, it’s way too convoluted for me. If you give #container a 1px solid border you will see what the problem is, but how to clear that with all the absolute positions and z-indexes is beyond me.
Hmmm :(. The problem I believe is the #page container isn’t the same height as all the child divs/containers. Right now I have it set to 100% which is only doing 100% of the browser window. If I set it auto, then it shows nothing and doesn’t take any space. Somehow I need the height of #page to be the height of all the child containers.
Ah, we have come upon the limitations of CSS yet again!
Some other simple (albeit compromising) solutions:
1) Apply a fixed height to your div with the bg image. This will unfortunately give you permanent scroll bars, but it will ensure you see the bg.
2) Have the bg fade to the background color at some point far down so it appears to be solid on most pages, but on extra large pages it will fade to white and at least be more appealing.
3) Apply a repeating bg to the body of the page and not an element. This may require some rebuilding of the page, but if the bg is important, it’s a good solution. You can apply a white bg color
4) Get rid of that background image altogether! I think the site would look pretty good without it.
The one suggestion I want to leave you with is to think like the elements. Learn what the elements + CSS can actually do and what they cannot! I had a lot of trouble early on trying to force HTML & CSS to work in a way they wouldn’t instead of having them work the way they do.
As for the height of #page being the same as the other container elements, it does this naturally if you don’t set a height for it and clear all your floats inside properly. Elements wrap their child elements naturally in the DOM. That’s just the way it works by default!