Push divs down in containing div with CSS

css, css-float, css-position, html

Solution

You could use an additional container for the inner containers and use the trick you suggested.

    <style>
 div{border:1px solid red}
 #container{height:1000px;}
 #inner-container{position:absolute;bottom:0px;}
 .inner {height:200px;width:200px;margin:5px;;
</style>


<div id="container">
 <div id="inner-container">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
 </div>
</div>

Problem

I would like to build a sort of "stack" of divs (with class .inner) within a containing div (#container) where each inner is pushed as far down in the container as possible without overlapping another inner. I've included illustrations of what this would look like with one and three inners, respectively: I know I could get the result on the left by setting... ``` #container { position: relative; } .inner { position: absolute; bottom: 0; } ``` ...but this solution would not scale to the example on the right - instead it would cause all of the inners to overlap one another. Is there any good way to accomplish what I want through CSS alone for an arbitrary number of inners? I know I could do it with some hacky Javascript.

Original source