CSS3 Columns and Images

Question

My example here,

Shows an image in the center of CSS3 generated columns. I need the text in the column to the right of the image to wrap around the image so that it doesn't appear in front of the image. This to my understanding is not doable in current css.

Does someone have a NON-OBTRUSIVE way of achieving what I am looking for?

I'd love to achieve this look here,

without the title and misc stuff located in the top left of course. The idea would be to allow the adding of images anywhere in the markup and have it look correctly.

I dont care about browser support at this time, so - any solution is great!

Thanks in advance....

Erik

Answer 1

Without doing JavaScript hacks, I don’t believe there is any pure CSS way of doing this. There is the column-span property, which is supported by Opera (currently not in a public build), but it only has two values; none and all. The spec currently doesn’t allow you to specify the number of columns, which would be very useful. It’s something I’d love to see.

Answer 2

Maybe the column span property can help if you create an additional container for the image and set the column-span width to the cumulated width of the middle columns.

You could also make the middle column larger and remove the need for another column, so the text and the image will be nicely aligned, but at this step, it is design consideration.

http://designshack.co.uk/tutorials/introduction-to-css3-part-5-multiple-columns