Bottom, fixed position DIV with layered children

[HaLo2FrEeEk]

I'm trying to make a div position itself at the bottom of the window, fixed location so that regardless of my scroll position it always stays at the bottom, and inside it has layered children divs.

Basically I've got a wrapper div, and inside I've got 2 child divs. One of the child divs displays completion percentage text, the other a progress bar. I want the text div to be on top of the progress bar div, and all of it to be inside the wrapper div, at the bottom of the window. Here is my HTML and CSS:

CSS

<style>
body    {
        margin: 0px;
        }

#progress_wrapper {
        position: fixed;
        bottom: 0px;
        margin: 0px auto;
        width: 100%;
        height: 20px;
        background-color: gray;
        z-index: 0;
        }

#progress {
        position: absolute;
        bottom: 0px;
        left: 0px;
        height: 100%;
        border-right: 1px solid black;
        background-color: #0f81a7;
        z-index: 50;
        }

#progress_text {
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        color: #FAFAFA;
        text-align: center;
        z-index: 100;
        }
</style>

HTML

<div id="progress_wrapper">
  <div id="progress_text">Loading...</div>
  <div id="progress" style="width: 0%;"></div>
</div>

This should work, but what I get instead is the wrapper div positioned at the top of the window and the text and progress bar positioned at the bottom, layered properly.

There has to be a way to make this work!

[drhowarddrfine]

I, for one, have been out of town and didn't have time to dive into this. One thing you should think about till I can get to this is that absolutely positioned elements are removed from the normal flow and will rise up to the first positioned element. Position:fixed is also an absolutely positioned element. Those two thoughts may be the reason for your problem but I won't be back home till some time tomorrow.

[HaLo2FrEeEk]

I still don't understand what you're telling me. Setting the position: fixed and bottom: 0px should make the element appear at the bottom of the page, I know this because I did it on another site. The only difference was that on the other page I didn't have asolutely positioned divs inside the wrapper div, I just allowed them to position themselves inside it. I need to have the divs overlap so that the text showing the percentage of completion is on top of the actual progress bar itself. Here is what I have so far:

http://halo3shots.infectionist.com/progress.php

It's obviously wrong. I also had to really jerry rig the PHP to make it actually output the buffer every loop. Basically I have to output 64kb or more per loop, forcing PHP to flush it's buffer to the browser. But that's not my issue now.

[drhowarddrfine]

I don't see that at all and the markup you show works. Which browser are you testing in? Your link doesn't show anything.