Image (in div) overlapping two divs

HTML & CSS
1

Hi all
I have hit a blank on this one maybe I need to use an absolute div or something. I have two divs (top, bottom) and I want to put the red arrow image arrowmain.png to be half overlapping both divs. How can I do this please? Thank you
test


<div id="top">
		<a href=""><img src="test1_files/1.png" alt="" style="float: left;" width="934" height="139"></a>
<img src="test1_files/arrowmain.png"></div>

<div id="bottom"><a href=""><img src="test1_files/2.png" alt="" style="float: left;" width="932" height="121"></a>
</div>
2

Just put the arrow img in the bottom div. Giv the bottom div position relative and the arrow img position absolute. Then use top/left to put it where you want.

3

Or just used a negative top and bottom margin to soak the image height to zero.

e.g.


<img [B]style="margin:-29px 0"[/B] src="test1_files/arrowmain.png">

Placing it absolutely is probably more robust depending on situation.

4

Thanks Eric is IE it overlaps the bottom div but not the top and in Chrome it doesn’t work - why is that please? thanks

test page

5

Hi,

That code is a bit muddled and not quite sure what you are trying to do. The element called #bottom isn’t clearing the floats above so you will get the background sliding underneath and the absolute positioning will vary between browsers.

You have omitted the co-ordinates also so all browsers will just leave the element where it thinks it is in the flow which is awkward because of the float set up.

Clear the floats and apply co-ordinates and all browsers will be the same.


<div id="top" [B]style="width:100%"[/B]><a href=""><img src="http://copywritecolombia.com/test1_files/1.png" alt="" style="float: left;" width="934" height="139"></a></div>

<div id="bottom" style="[B]clear:both;[/B]position:relative;width:600px;height:100px;background:grey;"> <img src="http://copywritecolombia.com/test1_files/arrowmain.png" style="po[B]sition:absolute;top:-34px;left:0;z-index:99[/B]"> </div>

Don’t use inline styles even when testing as it makes it so awkward to change and test.

Tidy up your css as you have a stray bracket and some styles in uppercase making it all look very messy :slight_smile:

Why all the “cleared” divs? There are better methods than using physical clearing elements.

6

Thanks Paul I will sort it out! I can move the abosultely positioned image horizontally but moving it vertically using “top” in the css it seems it is calculated from the top of the page, not the top of the div which would seem to make more sense. Shall I use padding instead to control vertical position? Thank you

7

Make sure you add position relative to the bottom div. That will position the AP arrow from the div and not the body.