Div ontop of another div?

[Stressednewbie]

Say I have a div say called leftcolumn which inside I have two text headings aligned just left of centre.

I want to put an image on the right hand side of those headings still within the leftcolumn.

The image because of its width goes right but beneath those headings not alongside them.

I have come to the conclusion this is because the width of my image obviously encroaches on those headings and therefore has to fall beneath.

I want it there however so that part of the headings reach and overlap that image. How can I do this?

I’ve given you a visual idea below as to what its currently doing (not what I want ha).

Do I have to create say a div for that image to do what I want? Pretty stuck and I’m struggling to understand what I think i may need to do – Absolute positioning? Could you please help in real simple terms as it seems I have an IQ of a tin of soup. Thankyou

MY HEADINGS

MY IMAGE MY IMAGE MY IMAGE MY IMAGE MY IMAGE
MY IMAGE MY IMAGE MY IMAGE MY IMAGE MY IMAGE

[Paulie_D]

If you change the display property of this particular heading to ‘inline-block’ does that solve the problem?

If you want the heading to ‘overlap’ the image then some sort of positioning will need to be used.

If you have an image of what you are trying to achieve it would be very useful.

[Stressednewbie]

definately want the heading to overlap the image. I can try to explain my effect better for you however. I am just practicing for now and I got a picture off dreamstime of a man with a white background running. Beens as my webpage is white, I want the heading to overlap the white background of the image and come not far from the runners head.

[Paulie_D]

I think you can do it: http://codepen.io/Paulie-D/pen/nLvwE

Frankly, I am uncomfortable with using absolute positioning quite that much but if needs must….

[Stressednewbie]

I think I may have done it using position relative, bottom, 100px

[Stressednewbie]

I see how you have done it through putting positioning properties on leftcolumn the heading and the image. I just used position relative on my image like I mentioned above. Is this okay?

[Paulie_D]

Hey, if it works then that probably good enough.

Your current fix will probably only work for one instance though, it might not work if you had many iterations of different images / headings.

Without seeing the site in question it’s hard to comment further.

[Author]

Posts