Positioning a div near bottom side of another div

Question

Tested and working on Firefox 3, Chrome 1, and IE 6, 7 and 8:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                      "http://www.w3.org/TR/html4/strict.dtd">
<html><body>
<div style="background-color: yellow; width: 70%;
            height: 100px; position: relative;">
    Outer
    <div style="background-color: green;
                position: absolute; left: 0; width: 100%; bottom: 0;">
        <div style="background-color: magenta; width: 100px;
                    height: 30px; margin: 0 auto; text-align: center">
            Inner
        </div>
    </div>
</div>
</body>
</html>

Live version here: http://jsfiddle.net/RichieHindle/CresX/

Leave a Comment Cancel reply