Question

I have a large DIV with information at the top.
I also have a image and I want the image to sit at the very bottom.
I could use a large margin to push it down but there must be a better way.
Some of the code:

Image:

 <div id="containerBody">
  <div id="facebookTwitter">
  <img src="images/site/common/social-media-twitter-seemeagain-dating2.png"/>
  </div>
 </div

Image size around 300*100 and DIV size around 960*1500

How can I get an image to sit at the VERY bottom of DIV?
The text and images already in the DIV are using float left for position – they sit close to the top.

thx

Answer 1

One way is to make use of the absolute positioning in your CSS to position your div containing the image exactly where you want it inside of a relative positioned div. Note that this is an important aspect. Else it will be positioned absolute in relation to your browser window.

So something like:

div#containerBody {
    position: relative;
}


div#facebookTwitter {
    position: absolute;
    bottom: 0px;
    height: 35px; //should be your image height
    width: 120px; //should be your image width
}

An easier solution would be to just use the background CSS property of your containerBody div like this:

div#containerBody {
    width: 100%;
    height: 500px;
    background-image:url('images/site/common/social-media-twitter-seemeagain-dating2.png');
    background-repeat: no-repeat;
    background-position: center bottom;
}

I made an example for you here on JSFiddle.