CSS3 multi-column layout and Image span

Can we have an image which spans over multiple columns which is created using CSS3 multicolumn property in an Html page. Here is my column layout style

div#column {
        margin-left:20px;
        -moz-column-width: 250px;
        -moz-column-gap: 20px;
        -webkit-column-width: 2开发者_开发百科50px;
        -webkit-column-gap: 20px;
        height: 850px;
      }

I need to place an image within this column layout which spans over atleast 2 or 3 columns.

Theoretically there is column-span, however it doesn't seem to be supported by any browser currently.

You could try with position:absolute as Simon suggests, but I doubt you will can satisfactory results and I don't think there is any other reasonable workaround.

Maybe there are JavaScript libraries that can do it...

Add a width on your div and add this style

column-count:3;
-moz-column-count:3;
-webkit-column-count:3;

See reference: >>

I asked @Krishna to post this question since our other SO question/answer session Increase font size with JavaScript around fixed floated images in CSS columns was getting off-topic, i.e. it was solved and this image spanning multiple columns warranted a new question.

So, my thoughts so far...

column-span is working in Webkit (Chrome12) for me. Check out the quirksmode demo page. However, the bad news is that it doesn't help solve this problem as the image that needs to span multiple columns still gets clipped at the column-width, so I don't think it is the solution.

For now I think the only solution is to do the columns yourself in JavaScript, or maybe try and use/modify the jQuery columnizer plugin.

Oh and I just found this other question CSS3 Columns and Images which basically agrees that it is impossible without JavaScript.

There is already have a lot of JavaScript for your font increase/decrease (different question, see my fiddle) so it would have been great if CSS supported this natively. All we want is big Yoda to spill over into the second column :-)

So I think that the only solution currently is:

1. For each image that is greater then the width of a column, work out how much into the next column it would be (including the column-gap)
2. Add a spacer floating <div> in the next where the image needs to overlap to, so that the words correctly continue to flow around and below the image
3. Absolutely position a copy of the image over the top.

I just hope you don't want images that span more than 2 columns otherwise it's going to complicate an already complex solution!

Use position:absolute, like this:

#image {
    position:absolute;
    top:300px; //distance from top
    left:200px; //distance from left
    width:600px; //image width
    height:400px; //image height
}