Align image to bottom center of div

HTML & CSS
1

Hello, I am looking for a cross-browser way to put an image that sits on the bottom of the div.

The div container that contains the image has the following css:

#right {
    background: #ffffff;
    float:left;
    width:195px;
    margin-bottom: -2000px;
    padding-bottom: 2000px;
}

Currently this div contains the following:

<div id="right">
<div class="mybox"><a href="#">A box</a></div>
<div class="mybox"><a href="#">Another box</a></div>
<img id="myimg" src="/images/test.gif" />

I have spent too much time trying to get this to work!!!

#myimg{
    position:absolute;
    bottom:0px;
}

This doesn’t work - the image is not on the bottom but about 150 pixels above.

Thanks :slight_smile:

2

Put position relative on the #right. Now AP the image. Is it now sitting on the bottom?

3

Hi Eric,

I just had a look and it appears that the image is sitting on the bottom of the div. However, the bottom of the div is not where I want it!!!

I have now changed it, so that the image is in the background:

background-image:url("/images/test.gif");
    background-repeat:no-repeat;
    background-position:bottom;

I now need to look into why my div isn’t where I want it :S

Thanks for your help

4

Hi,
I was going to suggest setting the image as a BG image within an AP div or nesting the image in the div. Be sure to define image width and height on the div and set a left value for IE6/7

#right {
    background: #ffffff;
    float:left;
    width:195px;
    margin-bottom: -2000px;
    padding-bottom: 2000px;
    position:relative;/*set containing block for AP children*/
}
#myimg{
    position:absolute;
    width:100px;/*image width*/
    height:100px;/*image height*/
    bottom:0px;
    left:50&#37;; /*or proper pixel value*/
    background: url("/images/test.gif") no-repeat;
}

<div id="right">
    <div class="mybox"><a href="#">A box</a></div>
    <div class="mybox"><a href="#">Another box</a></div>
    <div id="myimg"></div>
</div>
5

You need position:relative; to put the AP’d element relative to the container.

Also put left:0; there

Edit:

Shoulda refreshed…sorry had shower

6

Hi,

You’ll need to explain the dynamics of this because there are a number of problems to overcome :slight_smile:

First and most importantly you are using the equalising column negative margins on #right which means that in effect the bottom of that div is 2000px down the page from the end of the content.

If you want to absolutely place something at the bottom of #right (excluding the negative margin section) you would need to set it at a bottom position of 2000px.

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#right {
    background: #ffffff;
    float:left;
    width:195px;
    margin-bottom: -2000px;
    padding-bottom: 2000px;
    position:relative;
    overflow:hidden
}
#myimg {
    position:absolute;
    bottom:2000px;
    background:red;
    width:50px;
    height:50px;
    margin:0;
}
</style>
</head>
<body>
<div id="right">
    <div class="mybox"><a href="#">A box</a></div>
    <div class="mybox"><a href="#">Another box</a></div>
        <div class="mybox"><a href="#">Another box</a></div>    <div class="mybox"><a href="#">Another box</a></div>    <div class="mybox"><a href="#">Another box</a></div>    <div class="mybox"><a href="#">Another box</a></div>    <div class="mybox"><a href="#">Another box</a></div>
    <p id="myimg">test image</p>
</div>
</body>
</html>

However it will overlap content because absolute elements are removed from the flow. You would need to add an inner element with some padding equal to the images height to protect it.

This also begs the question as to why you are using the equal column method and do you in fact want the image at at he bottom of the longest column and not the current column?

If so then you would need to move the position relative to the main wrapper that holds all these columns.

You should be aware that the large padding and negative margin technique onbined with the overflow hidden on a parent will kill any in page links in that section (if there are any).

To help further we would need to know more about your current code and more about the effect you are trying to achieve in context :slight_smile:

7

OK, i think i solved it. Basically, I had three columns in a container. I wanted the image to sit at the bottom of the right column.

Instead of making the image the background of the right column, I made it the bottom-right of the container. This appears to have worked.

I am a little confused as to what else I should need to do for IE6/7. I assumed that image backgrounds’ were cross browser?

8

I am a little confused as to what else I should need to do for IE6/7.

BG images are acceptable cross browser.

What I mentioned was that IE6/7 needs a left or right property and value along with a top or bottom property and value when using position absolute.

9

OK. Thanks Rayzur. Thanks all for your help.

10

Instead of making the image the background of the right column, I made it the bottom-right of the container. This appears to have worked.

That’s what I said above also :slight_smile:

11

Sorry my solution should have read:

Instead of making the image the background of the right column, I made it the background (bottom-right) of the container. This solves the varying column length issue that I faced.

12

Yes that’s exactly what I was saying :slight_smile:

If you moved the position:relative to the main container then the absolute element would have been placed in relation to the wrapper and not the columns. It is exactly the same method as applying the background image to the main container (except that its cleaner to use the background image if the content you are placing is decoration only).

I did go into details quite thoroughly in the post :wink:

13

I’m sorry. You were right. Thanks Paul :slight_smile:

14

lol - I wasn’t looking for praise - I just meant it as a casual aside :slight_smile: Glad you got it sorted anyway.