Home Forums Community Forum Trying to float a partially hidden round image over two containers

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • lkling
    Post count: 4


    I’m trying to float a round image over two vertical containers that contain text as seen in this mockup.

    I’ve got the image in its own container + 100% wide column. I’m able to get the image to float above the 1st container using a negative bottom margin as explained here and I have the 2nd container of text with a positive top margin to push the text down.

    What I’m not able to figure out is:

    1. How do I partially push the image off-screen?

    2. How do I set this all up so as the browser width decreases, the text will continue to “wrap” around the image? (I’ve got the text in 75% wide columns to simulate the wrap but not sure if this is the best method.)

    Post count: 816

    Hi @lkling,

    1) Trying setting a static width on your image container then a negative side margin should work.

    In this code example https://codepen.io/marklchaves/pen/bGppEYq?editors=1100, if you only add margin-right: -65rem; to the image container (try adding it inline in the HTML of the second container tag), you won’t see any effect.

    But, if you add a static width too e.g., style="margin-right: -65rem; width: 1280px;" you’ll see the image shift off the frame to the right.

    2) Have a look at the shape-outside CSS rule https://codepen.io/marklchaves/pen/mdyzKgy


    Post count: 4


    Thank you so much! And, yes, this was a design element given to me by a graphic designer I’m working with.

    I’m going to first try and use the AVADA tools to recreate what you did in CSS. If that doesn’t work I’ll go the CSS route.


Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.