Make divs float from bottom in HTML

Problem

I am trying to see if it is possible to float html DOM elements from bottom to top, rather than the usual top to bottom method.

By this method, what I am trying to do is when one div element is placed on top of other, and if we hide the top one realtime, I want the bottom one to float down the bottom itself, rather than floating up.

This is a working fiddle , http://jsfiddle.net/6XG87/1/ , if you click on "Hide Red", you can see the bottom blue element floating up. I have tried vertical-align:bottom in css, but that didnt work.

Is there anyother css methods to get this feature working?

Problem courtesy of: user1371896

Solution

You can solve this setting

.outerContainer, .outerContainer div {
    -webkit-transform: scaleY(-1);    
    transform: scaleY(-1);    
}

(and removing align bottom.).

It makes the container be reversed, but the items are reversed againg so that they are facing upwards

fiddle

You can also get this with the flex system, but support in older browsers is weak.

Solution courtesy of: vals

Discussion

Like this

demo

demo1

css

#inner2{
    height:80%;
    background:blue;
    vertical-align:bottom;
position:absolute;
    bottom:0;
    width:100%;
}
Discussion courtesy of: falguni

Try it with display:table-cell and vertical-align:middle

Use an outer layer to apply position:absolute because table-cell wont be aligning properly with absolute position.

HTML

<div class="wrapper">
  <div class='outerContainer'>
    <div id='inner1'></div>
    <div id='inner2'></div>
  </div>
</div>

CSS

.wrapper{
       position:absolute;
        bottom:0;
        left:100px;
    }
    .outerContainer{
        width:20px;
        height:200px;
        position:relative;
        display:table-cell;
        vertical-align:bottom;
        border:aqua 1px solid
    }

DEMO

Discussion courtesy of: Sowmya

This recipe can be found in it's original form on Stack Over Flow.