image at center bottom of a div

[enfieldman]

Hi all,

I'm new here and have a question right away.

on the following url I have a website under construction for a vintage motorcycle maintenance shop.

http://users.skynet.be/oldscoolmechanics/

you can see a sideview of a motorcycle on the bottom of the brown pane, however when you resize the window, the bike doesn't stay at the bottom of the brown pane.

Is there anybody who might know how to position a picture on the bottom of a DIV?

It perfectly works when you place the image as background but then it cannot be used as link to go to the next page, which is the intention.

Any info would be very welcome

kind regards,

Enfieldman.

[Wickham]

You are using percentages in several styles which aren't working well. You have div.main height: 50%; div.intro height: 100% and class img.moto_intro top: 51%.

If you change
img.moto_intro{
position:absolute;
/*top:51%;*/bottom: 0;
left:50%; /*was 35%;*/ margin-left: -165px;
}

It makes the image stick to the bottom of div.intro. This works in IE6, IE7, Firefox, Opera and Safari for Windows but I often think percentages can cause problems in some browsers.

Changing left: 35% to left: 50%; margin-left: -165px; keeps the bike central in the width of a smaller window better than 35% because 35% is to the left side of the image which means that in a small window of say 500px the image starts at 175px and has a width of 310px so that the far side is at 485px so obviously it is not central.