Im trying to make a two column section where the text is continued on the next side, but i would like it to wrap around the image in the center. Heres a mock-up (ignore the weird white space at the bottom):
How would I do this?
I Googled for “CSS wrap text around image”, checked a couple of pages and think this result may be useful:
1 Like
Start by taking the time to create an image that is not broken so we can see what you want.
2 Likes
That is the way, but be aware that shapes don’t have very wide browser support yet.
But in reality that just means un-supporting browsers will get ordinary box wrapping, not a big deal IMO.
2 Likes
It would be quite awkward in 2 columns as you would need to basically split the image in 2 halves and put it in each column or as in this example use a pseuedo element to hold the space open and absolutely place the image into position. (See old css quiz for more info)
The shape outside doesn’t seem to work very well with this approach though although you may be able to tweak it better.
Also two columns would be better done using css columns but then you can’t spread the image over the middle of two columns.
1 Like
The image works in Chrome but not in Firefox.
Thank you, everyone for the information. I think I may just end up doing straight columns, but this has been very informative.
Thanks, @SamA74. I often have problems with vids in FF but not images. I didn’t think to check Chrome. Hopefully, lesson learned 
If anyone is still interested here’s a much better version with the text rounded nicely around the circular image.
(View at full size on codepen to see the effect.)
Note that the shape-outside is only working in webkit at the moment so view in Chrome for best results. Older browsers will still work ok but get the square box shape around the image as with normal floats.
The above requires that the same image is placed in both columns although one image could be replaced with a pseudo element instead but for the demo its easier to follow what’s happening when there are two of the same images (there is no extra overhead in including the same image again as it is already cached for the first one).
One image is floated to the right in the first column and the second image is floated to the left in the second column. The text in the first column has a margin-right equal to half the image width to pull it back to the center of the image. The reverse is true for the second column. Then all that is needed is to pull the whole second column on top of the first so that the two images now sit exactly on top of each other to produce the circular cut out effect.
The image is moved down for the top by means of a ‘sandbag’ technique which is by floating a 1px float to the side and then clearing it with the image. This allows the text to wrap both floats and appear as though the images is floated inside the text and not at the top.
Lastly we increase the width of each column using calc so that each is 50% wide plus half the image width so that it fills the original space.
I also added a media query for smaller screens to scale the image smaller and to turn it back into one column. The whole thing should work from IE11+ but only have shape outside in webkit (barring any unforseen bugs).
I quite like the effect now. It’s a shame it couldn’t be incorporated into css columns but that would be asking too much 
…and a little animation because its a quiet day around here.
4 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.