Grow your CSS skills. Land your dream job.

Div ontop of another div?

  • # February 7, 2013 at 10:07 am

    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

    # February 7, 2013 at 10:14 am

    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.

    # February 7, 2013 at 10:21 am

    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.

    # February 7, 2013 at 10:27 am

    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….

    # February 7, 2013 at 10:28 am

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

    # February 7, 2013 at 10:31 am

    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?

    # February 7, 2013 at 11:05 am

    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.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".