experiments with `display:table;`

A reworking of this demonstration, http://jsbin.com/etujad/1/edit, to contribute to the discussion at http://stackoverflow.com/questions/10453877/css-layout-vertical-source-order.

by simondell

HTML

<div class="container">
    <div class="bottom">1st block</div>
    <div class="middle">2nd block</div>
    <div class="top">3rd block</div>
</div>

<div class="container">
    <div class="bottom">1st block</div>
    <div class="middle">2nd block</div>
    <img class="top" alt="3rd block" src="" width="200" height="100" />
</div>

CSS

div { background-color: lightblue; }

/* container */
.container { 
    display: table; width: 100%; 
    background-color: transparent;
    margin-bottom: 20px;
}

/* rows */
.bottom  { display: table-footer-group; } /* bottom */
.middle  { display: table-row-group;    } /* middle */
.top     { display: table-header-group; } /* top */