DIV box on top on an image?

Hi all,

There is something that is driving me mad and I just can’t get it to work and I hope someone on here can help me out :rolleyes:

Ok, I have an image with in a DIV layer and I want to overlay a DIV layer on top of that image, I have tried with position:fixed; but the box is all over the place, here is the code I am doing:

#image_holder{
background-color:#333333;
width: 500px;
float:left;
}

#contentbox{
width: 120px;
height:60px;
float:left;
background-color:#999999;
padding:15px;
position:fixed;
z-index:2;
font-size:11px;
overflow:auto;
}

Firstly I want the overlay box to align to the bottom of the image.

And also it does not seem to work in IE6?!

Can someone please show me an easy want to add a DIV layer on top of image?

Thanks all!

Emma :wink:

Position fixed doesn’t work in IE6
Try position absolute :slight_smile:

DOH! I can’t believe that was it… lol thank you so so much. One last thing, what’s the best way to get the box to align to the bottom? Just a margin?

Hi Emma,

A couple things here. As ScallioXTX pointed out, position: fixed is not supported in IE 6, but it can be emulated. (example 1, [url=http://battletech.hopto.org/html_tutorials/fixed_element.html]example 2)

If you really want the image to appear at the bottom, give its container a relative position, then absolutely position the image at the bottom inside that (since the absolutely positioned image will be relative to its container, rather than the viewport).

Thank you so much ScallioXTX and Dan Schulz for your help, much appreciated! :wink: