Image won't move to bottom of div

[Aaron]

I have a div with an image which needs to appear in it's bottom left. I
currently have the padding top of the image set to 100%, which should
move the image to the bottom of the the div, but for some strange
reason, there is still space below the image which I can't get rid of.
I've set the image margins to 0 and it does nothing, so it's not the
margins. The stranger thing is, if I reduce the height of the enclosing
div to 326px, the space below the image is gone. Shouldn't the image
always remain at the bottom of the div no matter what, due to it's
padding-bottom setting?

<div style="background-image: url(images/homepage_03.jpg); width: 275px;
height: 345px; float: left;"><img src="images/sign_topright.gif"
alt="Making Homes Beautiful Since 1992" border="0" style="padding-top:
100%;"></div>

You can see what I'm talking about at http://www.aaron-chandler.com/,
where what's built of the page is temporarily residing. The little sign
piece at the bottom left of the house is what I was referring to above.

Thanks,
Aaron

[Els]

Aaron wrote:

I have a div with an image which needs to appear in it's
bottom left. I currently have the padding top of the image
set to 100%, which should move the image to the bottom of
the the div, but for some strange reason, there is still
space below the image which I can't get rid of. I've set
the image margins to 0 and it does nothing, so it's not the
margins. The stranger thing is, if I reduce the height of
the enclosing div to 326px, the space below the image is
gone. Shouldn't the image always remain at the bottom of
the div no matter what, due to it's padding-bottom setting?
Probably the same space as underneath text, to make room for
the g, p, q, y, j... give the image display:block, and it
might just disappear.
<div style="background-image: url(images/homepage_03.jpg);
width: 275px; height: 345px; float: left;"><img
src="images/sign_topright.gif" alt="Making Homes Beautiful
Since 1992" border="0" style="padding-top: 100%;"></div>

You can see what I'm talking about at
http://www.aaron-chandler.com/, where what's built of the
page is temporarily residing. The little sign piece at the
bottom left of the house is what I was referring to above.

Haven't looked at it, but I'm almost positive it's the
display:block you need

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Aaron]

Els wrote:

Probably the same space as underneath text, to make room for
the g, p, q, y, j... give the image display:block, and it
might just disappear. Haven't looked at it, but I'm almost positive it's the
display:block you need

I set the image style to display:block, but I'm getting the same
results. I've uploaded the changes also. If anyone wants to see what I'm
talking about, it's at www.aaron-chandler.com.

Thanks,
Aaron

[Els]

Aaron wrote:

Els wrote:

Probably the same space as underneath text, to make room
for the g, p, q, y, j... give the image display:block, and
it might just disappear.

Haven't looked at it, but I'm almost positive it's the
display:block you need

I set the image style to display:block, but I'm getting the
same results. I've uploaded the changes also. If anyone
wants to see what I'm talking about, it's at
www.aaron-chandler.com.

Change padding-top:100% to padding-top:107%.
Forget about the display:block :-)

Tested in IE6 and Firefox.

Reason: it's the padding to the top of the window, which
apparently is 7% of the div's height higher than the top of the
div. Has to do with a floating div being taken out of normal
flow or something like that. It's late.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Els]

Els wrote:

Aaron wrote:

Els wrote:

Probably the same space as underneath text, to make room
for the g, p, q, y, j... give the image display:block,
and it might just disappear.

Haven't looked at it, but I'm almost positive it's the
display:block you need

I set the image style to display:block, but I'm getting
the same results. I've uploaded the changes also. If
anyone wants to see what I'm talking about, it's at
www.aaron-chandler.com.

Change padding-top:100% to padding-top:107%.
Forget about the display:block :-)

Tested in IE6 and Firefox.

Reason: it's the padding to the top of the window, which
apparently is 7% of the div's height higher than the top of
the div. Has to do with a floating div being taken out of
normal flow or something like that. It's late.

Thinking again, I don't know if the space between the div and
the top of the window might change later, this would give a
problem with the method I just gave.

Instead, you can do give the image margin-top: 294px; which
will always be okay, as it is the margin between the top of
the image and the top of the div it is in, not the top of the
window.

Margin is between objects, padding is between the object and
it's own border. Seemed to stop at the window's ceiling
thought ;-)

hth

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Aaron]

Thanks for the help, Els, that did the trick. You really seem to know
your CSS.

Aaron