Images not filling wrapper <div> elements

The Problem:

So I have this webpage: http://a.yfrog.com/img610/3543/p4.p开发者_开发问答ng

I have several images that are layered together to create the background gradient, but for whatever reason, the two side gradients aren't filling the entire page. All the gradients are in elements that wrap the entire page. If I set the overflow of one of the divs to overflow:auto; I can scroll that div to the length of the page (which I set to 5000px for testing) but its only in the box where you see that little cutoff, and as far as I can tell, it does this in all browsers. What's the issue? And for further clarification, I'm talking about how the gradients on the sides suddenly stop.

CSS:

#super_wrapper { height:100%; }
#page_bg_top {
  background:url(../images/body/top_shadow.png) repeat-x top;
  height:400px;
}
#page_bg_topleft {
  background:url(../images/body/top_left.png) no-repeat top left;
  height:300px;
}
#page_bg_topright {
  background:url(../images/body/top_right.png) no-repeat top right;
  height:300px;
}
#page_bg_left {
  background:url(../images/body/left_shadow.png) repeat-y left;
  height:100%;
}
#page_bg_right {
  background:url(../images/body/right_shadow.png) repeat-y right;
  height:100%;
}

HTML:

<div id="super_wrapper"><div id="page_bg_top"><div id="page_bg_topleft"><div id="page_bg_topright"><div id="page_bg_left"><div id="page_bg_right">
... Page Body
</div></div></div></div></div></div>

First of all, it's recommended to use less divs in your markup and there are more efficient ways to achieve the look you want, but you will learn that with time and practice.

First of all, if you want those gradient shadows on left and right to span the height of the document you need the divs that have those background images to be on the outside of everything except the wrapper.

So here is the correct markup:

<div id="super_wrapper">
    <div id="page_bg_left">
        <div id="page_bg_right">
            <div id="page_bg_top">
                <div id="page_bg_topleft">
                    <div id="page_bg_topright">

                    ... Page Body
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Next you need to give those two divs "overflow: hidden" in order to cause the backgrounds to repeat to the full height of the contained child divs.

Like this:

#page_bg_left {
  background:url(../images/body/left_shadow.png) repeat-y left;
  height:100%;
  overflow: hidden;
}
#page_bg_right {
  background:url(../images/body/right_shadow.png) repeat-y right;
  height:100%;
  overflow: hidden;  
}

Well, it appears that there was some sort of height inheritance happening. An element inside of the <div> area had a height manually set, and when I removed the height from that element, the background filled the entire page. I haven't the slightest clue why that happened or what caused it.