title: Align images to bottom of page
body: <p>This seems to be a common problem but I'm having trouble.
  When I set my css with </p>
  
  <pre><code>position: absolute; 
  bottom: 0;
  </code></pre>
  
  <p>, all my images end up overlapping each other, instead of being displayed next to each other, on the bottom.
  How do I fix this?</p>
  
  <p><strong>Edit:</strong> I can't encase them in their own div because when clicked, the targeted image is supposed to go to the top of the page </p>
  
  <pre><code>:target{
   position:absolute; 
   top:0
  }
  </code></pre>
  
  <p>Edit: Code::
  <a href="http://jsfiddle.net/5MXLb/" rel="nofollow">http://jsfiddle.net/5MXLb/</a></p>
  
  <pre><code>div#main{
      text-align: center;
  }
  
  .gallery{
      display: inline-block;
      height: 100%;
  }
  
  .gallery img{
      display: inline-block;
      max-height: 10%;
      bottom: 0;
      position: absolute;
  
  }
  .gallery img:target{
      position: relative;
      top: 0;
      max-height: 90%;
  }
  </code></pre>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div id="main"&gt;
          &lt;div class="gallery"&gt;
              &lt;a href="#img1"&gt;&lt;img id="img1" src="http://placehold.it/200" /&gt;&lt;/a&gt;
              &lt;a href="#img2"&gt;&lt;img id="img2" src="http://placehold.it/400" /&gt;&lt;/a&gt;
              &lt;a href="#img3"&gt;&lt;img id="img3" src="http://placehold.it/600" /&gt;&lt;/a&gt;
              &lt;a href="#img4"&gt;&lt;img id="img4" src="http://placehold.it/800" /&gt;&lt;/a&gt;
              &lt;a href="#img5"&gt;&lt;img id="img5" src="http://placehold.it/1000" /&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>