Question

I’m working on a simple CSS and HTML website, trying stuff out.

I wanted to make an image float over a div. Something like so:

    <div id="big_container">
        <img id="img1" src="images/fun.png"/>
        <div id="some_container"></div>
    </div>

Here is the CSS for it:

#big_container{ width: 960px; height: 270px; margin-left: auto; margin-right: auto; margin-top: 42px;}

#some_container{ width: 100%; height: 198px; border: 1px solid #cccccc;}

#img1{ width: 69px; height: 200px; float: left; position: relative; left: 200px;}

What this does, is instead of placing the img over the some_container div, it places it FIRST and after the image, underneath it, it places the some_container div.

How can i get the image to float over the div? Firefox and Chrome display it correctly. IE8 does not.

EDIT

I tried removing relative and left, according to Kyle Sevenoaks. But it still displays it above the div, and does not overlap.

Answer 1

You can use position: absolute; to make it display over the div you require:

#img1{ width: 69px; height: 200px; position: absolute; left: 200px;}​

http://jsfiddle.net/Kyle_Sevenoaks/dLnm7/

EDIT

I forgot to mention that with this you should add position: relative; to the parent div.

http://jsfiddle.net/Kyle_Sevenoaks/dLnm7/1/