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.