Left side BG not span whole page

[Bird]

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.

Here is a link to the dev site: http://204.200.159.228/

Attached is a screen shot that shows what I’m talking about.

Here is the CSS for that portion.

Code:

/* container for complete page */
#page {
position: relative;
background: white;
width: 100%;
height: 100%;
min-width: 1000px;
z-index: 0;
}

/* left half */
#lbanner {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 50%;
background: url(../images/lbannerbg.jpg) repeat;
z-index: 1;
}

[apostrophe]

Try adding overflow: hidden to the css for #page.

[Bird]

When I add overflow:hidden to #page then I can no longer scroll down to see the content.

[apostrophe]

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.

[Bird]

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.

[benwolken]

Ah, we have come upon the limitations of CSS yet again!

I have this issue all the time as i love bg images. As far as i know, there is NO WAY to deal with this in CSS. Perhaps you can deal with this in javascript somehow.

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!

[Author]

Posts