8

My example here, http://www.nenvy.com/

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, alt text

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

Erik5388
  • 2,171
  • 2
  • 20
  • 29
  • ^^ 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 Jan 02 '11 at 06:13
  • How are you floating it? This is what floats were made for! – rxgx Jan 05 '11 at 09:27

5 Answers5

3

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.

David Storey
  • 29,166
  • 6
  • 50
  • 60
  • That's the answer I was looking for. It would be cool for this capability to appear in a future spec. Which stinks because I do believe they had their "last call" a couple months back... I'm not sure what the coloumn span spec says but I don't remember seeing anything other than the two values of "all" and "none"... If you see any changes in modern browser implementation of column span make sure and let me know (: – Erik5388 Jan 10 '11 at 04:15
  • As far as I understand it, they’re trying not to change the columns spec too much to get it into Rec, then will add functionality in the next version of the spec. – David Storey Jan 10 '11 at 12:09
1

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

Christophe Eblé
  • 8,071
  • 3
  • 33
  • 32
0

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; }

Tim
  • 1,938
  • 1
  • 13
  • 20
  • I too like your response. However the goal here is not to re-size the image but instead have the content wrap the image. – Erik5388 Apr 19 '11 at 17:53
0

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,

  • I like your answer (and your blog - heh), but the goal here is to not shrink the image. Instead - have the content wrap the image. – Erik5388 Apr 19 '11 at 17:52
0

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.

nqw1
  • 979
  • 3
  • 11
  • 16