CODEWITHSUNDEEP
htmlcss
Adam
Adam

Reputation: 20962

HTML CSS IMAGE - Positioning

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

Upvotes: 0

Views: 331

Answers (4)

Jules
Jules

Reputation: 7233

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.

Upvotes: 1

Jose Faeti
Jose Faeti

Reputation: 12314

You should use an absolute positioning instead of floating.

If you give margin, the margin won't change if the page then becomes higher, and the image won't follow the bottom of the image.

Check this example.

Upvotes: 0

Noam Smadja
Noam Smadja

Reputation: 1035

#facebookTwitter img{
       vertical-align:bottom;
}

Upvotes: 0

Tushar Ahirrao
Tushar Ahirrao

Reputation: 13155

Try this css:

#facebookTwitter{
 position:relative;
}


#facebookTwitter img{
 position:absolute;
 bottom:0px;
 }

Upvotes: 0

Related Questions