The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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



    # 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:

    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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed