CODEWITHSUNDEEP
htmlcss
Brad
Brad

Reputation: 12252

need to display an image at the very bottom of a div

I want the image to display at the very bottom of the div, the div doesn't have a set height, as it changes based on how much content is in the content-body div

<a href="http://facebook.com/page" id="find-us-on-facebook">facebook</a>

Here is the css for the link w/ the background-image

#featured-left a#find-us-on-facebook:link,
#featured-left a#find-us-on-facebook:visited {
 display: block;
 width: 183px;
 height: 52px;
 text-decoration: none;
 background: url('/images/uploads/images/find-us-on-facebook.png') no-repeat;
 overflow: hidden;
 text-indent: -10000px;
 font-size: 0px;
 line-height: 0px;
}

#featured-left a#find-us-on-facebook:hover {
 background-position: 0 -52px;
 overflow: hidden;
 text-indent: -10000px;
 font-size: 0px;
 line-height: 0px;
}

Upvotes: 0

Views: 996

Answers (5)

Tom Tu
Tom Tu

Reputation: 9583

Add padding-bottom: 52px to the content div in which your facebook button is located equal to the height of the button (52px) (if there is already some padding at the bottom of the container add it to 52px or add even more to create a gap between the button and the content) and set position property of content div to position: relative.

Then set your facebook button position to position: absolute and position it with bottom: 0 and whatever left, or right you see fit.

Then there is one more and a bit more civil solution - to simply put it at the very bottom of the content you put inside the content div. Although I assume that since you ask about this you can't do that.

Upvotes: 1

Metod Medja
Metod Medja

Reputation: 768

Try this

position: absolute;
bottom: 0;

and make sure that the div that you want this to be displayed in at the very bottom doesn't have position: static

I hope this is what you're looking for.

Upvotes: 0

Bazzz
Bazzz

Reputation: 26937

try adding the following CSS:

#featured-left {
 position: relative;
}

#featured-left a#find-us-on-facebook {
 position: absolute;
 bottom: 0;
}

Upvotes: 0

Dai
Dai

Reputation: 1510

Try

vertical-align:bottom;

That might work.

Upvotes: 0

user527892
user527892

Reputation:

Assuming you mean your background image and that you still want it left aligned (as it would be by default) change

background: url('/images/uploads/images/find-us-on-facebook.png') no-repeat

to 

background: url('/images/uploads/images/find-us-on-facebook.png') no-repeat left bottom

Upvotes: 1

Related Questions