centering an image while text covers both canvas (left and right)

Question

I have a simple text like this, with image in the middle of the content:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <img src="img/foo.png" /> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

What I want is the text to be on left on right, while the image completely covered in the center. It seems I can use the float, which works well, but only to either left or right.

Is there anyway to achieve this with css, without any hacks?

Answer 1

What you are trying to achieve is something very new in HTML5 and CSS3 Called CSS shapes that allow text to wrap around images and shapes. You can see how to achieve this by following this link http://www.html5rocks.com/en/tutorials/shapes/getting-started/ But the down side is that it is only supported in very modern browsers.