Push divs down in containing div with CSS

Question

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.

Solution 1

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>

Solution 2

Depends on what browsers you need to support. But a much cleaner solution would be to try mimicking some table layout in CSS.

I've not had a chance to thoroughly test this with IE8+, but most modern browsers can handle CSS table layout properties which would allow you to do something like this relatively easily.

So...

CSS

.container { display: table-cell; vertical-align: bottom; height: 400px}

HTML

<div class="container">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
</div>

The only caveat is that if you have two of these "container" divs following each other in the code, than they will behave like table-cells (TDs) and sit next to each other.

If you want to stack them, then you can get around this by wrapping the containers in a div without the table-cell style, or sticking another element inbetween... e.g.

<div>
    <div class"container">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3</div>
    </div>
</div>
<div>
    <div class="container">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3</div>
    </div>
</div>

OR...

<div class="container">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
</div>
<div></div>
<div class="container">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
</div>

Comments

[ireardon]

Great, straightforward idea, can't believe I didn't think of that. Thanks!