Text unten platzieren ohne Positionierung

Nur eine Skizze, die ich beim Surfen gesehen habe. Fraglich, ob sie sinnvoll ist.

by Jens Grochtdreis

HTML

<div class="outer">
    <div class="middle">
        <div class="inner">
            Dieser Text kommt nach unten
        </div>
    </div>
</div>

CSS

.outer{
        height:100px;           /* or whatever height you prefer */
        font-size:2em;          /* set this to whatever you like */
        background-color:orange;
        margin:0 auto;
    }

.middle    {

        margin:90px 0 0 0;      /* push down under the outer-box. For fixed pixel
                                   based spacing below the text use a lower
                                   value than the outer box's width  */
        float:left;             /* required for standard browsers !!! */
        width:100%;                /* whatever you like */
        height:auto;            /* required reset */
        padding:0;              /* required reset */

        background-color:blue;
    }

.inner    {
        margin:-1.2em 0 0 0;    /* reducing this may result in overflow problems
                                   with below baseline glyphs
                                   depending on the browser */
        white-space:nowrap;
        background-color:yellow;
    }

JavaScript

// Original:
// http://k-u-h-n.net/wp/index.php/2009/07/14/text-at-the-bottom-of-a-div-without-positioning/