CSS3 multi-column layout and Image span

Question

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: 250px;
        -webkit-column-gap: 20px;
        height: 850px;
      }

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

score 1 · Answer 1 · answered Mar 30 '11 at 12:46

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

score 0 · Answer 2 · edited May 23 '17 at 10:27

0

Add a width on your div and add this style

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

See reference: >>

edited May 23 '17 at 10:27

Community

1
1

answered Mar 30 '11 at 10:03

ace

6,775
7
38
47

score 0 · Answer 3 · edited May 23 '17 at 11:58

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:

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)
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
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!

score -1 · Answer 4 · answered Mar 30 '11 at 07:11

-1

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
}

answered Mar 30 '11 at 07:11

Simon M

2,931
2
22
37

by giving position absolute to the image, the text went downwards to the image. – Krishna Mar 30 '11 at 07:22
@Krishna, what exactly do you mean by that? The text went under the image? In that case, put the text in a DIV and apply this style to it: margin-top:image-height-in-pixels; – Simon M Mar 30 '11 at 07:31
@Simon..you mentioned the right problem, the text went under the image. By giving the margin-top style to the div works but it applies to all columns. Please look at the style which i given to text div. say. if had given 3 columns text and my image spans over two columns. Then by applying a margin top to that div causes third column to come down, so there will be a blank space. Is there anyway that we can remove this. – Krishna Mar 30 '11 at 08:49

CSS3 multi-column layout and Image span

4 Answers4