ansaurus

Question

Stacking HTML elements at the bottom of a container

Answer 1

+1 A:

Make the container position:relative; and set the images to position:absolute; bottom:0;

However, this will not stack the images. They will overlay each other. If you need them stacked, the easiest (dynamic) way is to wrap the images with another container (like a div), and then set the styles on it. For example...

Markup:

<div class="container">
  <div class="innerContainer">
    <img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px" /> 
    <img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px" />
   </div>
</div>

CSS:

.container {
  background:url(http://img01.imagefra.me/img/img01/1/11/10/f_dwr8biwm_3ed594d.png) no-repeat;
  height:116px;
  width:33px;
  position:relative;
}

.container .innerContainer {
  position:absolute;
  bottom:0;
 }

Josh Stodola 2009-11-10 19:54:54

This causes both images to be positioned at the bottom (the second one hiding the first). I want them to be stacked - the forst one at the bottom, the next one just above it.

Danny 2009-11-10 20:17:49

Then add `style="bottom:33px;"` to the first `IMG` element.

Josh Stodola 2009-11-10 20:27:54

If hard-coding that in there is not your thing, you will have to wrap the images with an "inner container" element and set *it* to have the absolute position and bottom:0

Josh Stodola 2009-11-10 20:30:06

Thanks Josh - the inner container is just what I needed. I think it merits editing the answer (so I can accept it).

Danny 2009-11-10 20:47:02

@Danny I have updated the answer. I am glad you have resolved the problem.

Josh Stodola 2009-11-10 22:24:10

Oh, and by the way, I wouldn't mind playing the game when you get it finished ;)

Josh Stodola 2009-11-10 22:25:17

Answer 2

+1 A:

The solution: Add an innner div and set its position to bottom:

<html>
<head>
<style type="text/css">
.container {background:url(http://img01.imagefra.me/img/img01/1/11/10/f_dwr8biwm_3ed594d.png) no-repeat;height:116px;position:relative;
width:33px;}
.inner {position:absolute;bottom:0px;}
</style>
</head>
<body>
<div class="container"><div class="inner">
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px">
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px">
</div></div>
</body>

Thanks to Josh for suggesting this.

Danny 2009-11-10 21:58:42

ansaurus

tags:

views:

answers:

Stacking HTML elements at the bottom of a container

related questions