How do I get two images to be in the bottom right corner of a div?

Question

the div is 200x200 and the images is 20x20 and there are two of them. i want them both to be located in the bottom right corner.

Answer 1

It's hard to tell the perfect solution with the little info you give, but this should work:

<div style="position: relative; width: xyz; height: xyz">
  <img src="..." style="position: absolute; right: 0px; bottom: 0px">
  <img src="..." style="position: absolute; right: 0px; bottom: 0px">
</div>

Note that the div needs position: relative or absolute to work.

Answer 2

Pekka addresses the 'on top of each other' option, but if you want to position them side by side:

div#container {position: relative; }

div#container img {position: absolute; bottom: 0; right: 0; }

div#container img + img {position: absolute; bottom: 0; right: 20px; }

This does have the slight problem that if the image-size changes the CSS would have to be changed also (either by hand, or dynamically with JavaScript or serverside language). Plus if you want to add more images you'd have to add further rules.

You might get away from this if you put the images into a list, which would allow it to be more dynamic:

<ul>
<li><img src="img1.png" /></li>
<li><img src="img2.png" /></li>
<li><img src="img3.png" /></li>
</ul>

CSS:

ul {position: absolute; bottom: 0; direction: rtl; /* for arranging the inline elements/text right-to-left */}

ul li {display: inline; }

Answer 3

CSS

#outer-div {
    width: 200px;
    height: 200px;
    position: relative;

}

#inner-div1,
#inner-div2 {
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: 0;
}

#inner-div1 {
    right: 0;
}

#inner-div2 {
    right: 20px;
}