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

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

• javascript
• html
• layout
• css

• ^^ In the above image (the correct one), there is a css3 property defining 4 columns with a gap of 20px. The example has a divs wrapping each column. The column that contains the image (3rd column) tells javascript to wrap the last two columns then add a margin-top to the paragraph elements. – Erik5388 Commented Jan 2, 2011 at 6:13
• How are you floating it? This is what floats were made for! – rxgx Commented Jan 5, 2011 at 9:27

5 Answers 5

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 patibility 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.