lklingParticipantNovember 23, 2021 at 9:33 pmPost 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.)marklchavesParticipantNovember 24, 2021 at 10:07 amPost count: 816
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-outsideCSS rule https://codepen.io/marklchaves/pen/mdyzKgy
Cheers!lklingParticipantNovember 24, 2021 at 11:52 pmPost 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.
- You must be logged in to reply to this topic.