How to span an image over multiple columns in a CSS3 site layout?

Question

Given a basic four-column layout with a simple continuous paragraph of text, along with just one image spanning three columns, top-right aligned, how can we span our image o

Answer 1

I think that splitting the text in two blocks is currently the only solution. Bascially, you float the image right, place a first single column diff with the first text next to it and than place a second four column diff with the remaining text under it.

This solution works in firefox!

HTML:

    


    
Het was 17 graden onder nul toen het ijs onder onze benen begon te kraken. Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam. Paragraph Duis autem vel eum iriure dolor in hendrerit in 


    
vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam. Paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam. Paragraph Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim ass.

CSS:

.quatroColumns{             /* css multi column 4 columns */
    -webkit-column-count: 4; -webkit-column-gap: 20px; /* Chrome, Safari, Opera */   
    -moz-column-count: 4; -moz-column-gap: 20px; /* Firefox */
    column-count: 4; column-gap: 20px;
    width: 860px;
    font-size: 15px;
    text-align: justify;
}

.singleColumns{             /* css multi column 4 columns */
    -webkit-column-count: 1; -webkit-column-gap: 20px; /* Chrome, Safari, Opera */   
    -moz-column-count: 1; -moz-column-gap: 20px; /* Firefox */
    column-count: 1; column-gap: 20px;
    width: 198px;
    font-size: 15px;
    text-align: justify;
}

.singleColumns:first-child:first-letter {
    float: left; font-size: 67px; margin:  7px 5px -10px 20px;
}

.imageSpanning3Columns{     /* align to top-right */
    width:640px;
    top: 0 px;
    float:right;
}

.border{
    border: solid 0px;
    margin: 0px;
}

Here is a fiddle with an example:http://jsfiddle.net/1ye9tyhq/