CSS3: how to put something at the top of second column?

Question

I have a two column text layout of fixed width and height, implemented with -{moz,webkit}-column-* stuff (i.e. text freely flows from one column to another).

How do I put a image to the top of the second column, aligned to the right (i.e. to the outer border of the text), so that the text in the column flows around that image?

JS is OK (but I'd prefer to do without it). Should work at least in latest Chrome and latest FF. Mobile Safari is desirable.

score 2 · Accepted Answer · edited May 23 '17 at 10:34

2

It's tricky indeed, and even with JS I can't think of an optimal solution. Anyway, as Last Rose Studios says, you can use the column-break property on the image to force the image to be on the top of the second column always, as shown on this fiddle. However, this is a valid solution for webkit only, as firefox doesn't support column-break property yet afaik.

Taking this and the fact that the layout has fixed width and height into consideration, I think the best solution is just making two divs acting as columns as in this fiddle. Not the perfect solution, but I think the multi column layout is not enough for what you want, at least for the moment.

EDIT:

If you divide your text in paragraphs, you can make them flow from one column to the next one like in this fiddle using jQuery, based on this SO answer.

edited May 23 '17 at 10:34

Community

1
1

answered Oct 31 '11 at 11:48

scumah

6,273
2
29
44

There is a workaround for FF (at least for split prevention, which may be enough here): FF does not support `column-break`, but it does not split `inline-block` elements. – Alexander Gladysh Oct 31 '11 at 14:16
About using two divs: any ready-to use code to make the text flow in this case? – Alexander Gladysh Oct 31 '11 at 14:30
I'm afraid that FF workaround won't be useful in here since it won't make the image 'jump' to the next column. I can't think of any non-JS method to achieve that, but if you divide your text in paragraphs, you can make them flow from one column to the next one like in [this fiddle](http://jsfiddle.net/FX9JG/) using jQuery, based on [this SO answer](http://stackoverflow.com/questions/3009670/flow-2-columns-of-text-automatically-with-css#3039054). I don't know if it suits your needs, as it's not probably the answer you were looking for, but I think this is as close as I can get :P – scumah Oct 31 '11 at 16:11
Looks like what I need. Please incorporate this in your answer, so I can accept it. – Alexander Gladysh Oct 31 '11 at 18:05

score -1 · Answer 2 · answered Oct 31 '11 at 01:22

-1

take a look at css3 specs for it at http://www.w3.org/TR/css3-multicol/#column-breaks it might help

answered Oct 31 '11 at 01:22

Last Rose Studios

2,461
20
30

Thanks, but the question is — where to put that box with the image? I suppose it should be put at the right place by JS code, but where to?.. – Alexander Gladysh Oct 31 '11 at 02:26
For the record: at the time of writing, AFAIK, this solution only works in Chrome. See also comments to the other question. – Alexander Gladysh Oct 31 '11 at 18:06

CSS3: how to put something at the top of second column?

2 Answers2