Fixing a div with children to the bottom of the window

[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, and it still won't stay fixed, both the wrapper at the top and the progress and text bars at the bottom scroll with the window, I need their position to be fixed at the bottom.

 

There has to be a way to make this work!

 

Please, I tried asking at another forum and the question got completely ignored.  This is a brick wall in my development and I can't get any further without figuring this out, please someone help me!

[haku]

Whatever your problem is, it's in the code you aren't showing us, because that code is fine.

[HaLo2FrEeEk]

You know what it was, something completely stupid.

 

DOCTYPE!

 

When I'm testing scripts like this I usually don't make them fully HTML compliant, after all I'm just testing a concept.  When I put them into the working environment I abviously put them into compliant pages.  Well, apparently using the position: fixed attribute requires that a strict or XHTML doctype be set.  Adding that single line in fixed everything right up.  I now have a working PHP progress bar:

 

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

[haku]

One more reason why doctypes are very important.