CSS3 Columns and Images

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,

wit开发者_运维技巧hout 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

---

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.

---

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

---

Knock out the height and width img attributes - they're not needed - and use CSS max-width:100%;

There are some backwards compatibility issues (notably with IE), but they can be plugged with JS. This method is the future.

A useful related article with references:

http://www.ldexterldesign.co.uk/2010/10/99-css-problems-but-liquid-aint-one/

Best,

---

Instead of defining the number of column you could define their size to adjust to the size of pictures. Or you can define a size for every column, then you add a css selectors on images for making them automatically resize depending the width of the column.

Something like that .column{ columns: 12em; }

.column img{ width: 10em; }

---

This is not exact answer to your question but at least there is possibility to wrap text around the image inside one column. Check "Example X" from here.