How would I position an image at the bottom of a div using JavaScript without wrapping it? I understand I can wrap it with a div and do absolute positioning, but that muddies up the markup and it's dynamic content too, so I can't wrap the image, it has to target an image in a specific div.

Here is the basic markup, need it to find height of div, then position image at bottom. i think that is how it would work?

<div id="content">
 <p>some text</p>
 <img src="img.jpg"/>
</div>

How would I position an image at the bottom of a div using JavaScript without wrapping it? I understand I can wrap it with a div and do absolute positioning, but that muddies up the markup and it's dynamic content too, so I can't wrap the image, it has to target an image in a specific div.

Here is the basic markup, need it to find height of div, then position image at bottom. i think that is how it would work?

<div id="content">
 <p>some text</p>
 <img src="img.jpg"/>
</div>

• javascript
• image
• html
• position

• 1 wrappers and absolute positioning are the only ways to do it reliably cross-browser. It doesn't really muddies up the markup. – Aleks G Commented Sep 2, 2011 at 13:57
• I've had problems doing absolute position on images, unless I wrap them. that is definitely muddied markup. unless I'm misunderstanding. – Lukasz Commented Sep 2, 2011 at 14:24

3 Answers 3

You can position an image as well to the bottom of a DIV, you don’t need to add a second wrapper. Either do it in CSS:

div { position: relative; } 

div > img { position: absolute; bottom: 0; }

or do the same thing in JS if you need it be in JS.

As simple as this~~

#content
{ position:relative; padding-bottom:50px; } // if image height is 50px;
#content > img
{ position:absolute; bottom:0; }

That should do it. If you don’t use padding-bottom in the second rule, the image will be overflowed (and will cover the text) if the content of the div (its text) is not taller that the image height.

I would do it using CSS for sure, and don't remend doing it this way.. but you can do it with JS like so

Live Demo

var image = document.getElementById("image"),
    contentDiv = document.getElementById("content");

image.style.position = 'absolute';
image.style.top = contentDiv.offsetTop + contentDiv.offsetHeight - image.offsetHeight + 'px';