To keep the original suggested solution using column-span instead of an absolute positioned image.
Here's my suggested solution for this. The only thing you need to know is the height of the image, this might not be ideal but I think this solution is as close to perfect as it gets.
No javascript is used to calculate the columns, no added elements or classes are needed to make it work. I split up the block of text into multiple paraphrase since I think that's a more correct way of doing it. However this solution does not depend on the multiple paragraphs, you could remove them and it would still work the same. I just randomly added paragraphs to get a more natural text.
The following are the important parts.
article{
column-count: 4; /* Create 4 columns */
img {
/* For an image to work with column-span it needs to be a
block element */
display: block;
/* Now we can let the image expand to all columns */
column-span: all;
/* We'll need to give the image a fixed height.
A problem here is if we want a responsive layout. This wont
respect the aspect ratio of the image. That could be solve
by only allowing an adoptive layout and set hard heights
on the image. */
height: 200px;
/* Give it some margin to the columns under it */
margin-bottom: 25px;
/* Now comes the trick, first we want to push the image one
column to the right, that will be 25%, we're also adding
some extra spacing to make it look nicer */
margin-left: calc(25% + 10px);
/* Since we've pushed it one column to the right we only
want it to take up 75% (3/4) of the total width. */
width: calc(75% - 10px);
}
/* Lastly we want to give the first paragraph a negative margin
equal to the image height. This will move the first column
up to align with the top of the image. */
p:first-of-type { margin-top: -($imageHeight+25); }
}
The full, working, example
/* Just to make it look a little nicer */
body {
font-size: 16px;
line-height: 1.4;
color: #333;
padding: 1em;
}
article {
max-width: 860px;
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
}
article img {
display: block;
-webkit-column-span: all;
-moz-column-span: all;
column-span: all;
height: 200px;
width: calc(75% - 10px);
margin-bottom: 25px;
margin-left: calc(25% + 10px);
}
article p {
margin-bottom: 1.3em;
}
article p:first-of-type {
margin-top: -225px;
}
@media screen and (max-width: 800px) {
article {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
article p:first-of-type {
margin-top: 0;
}
article img {
margin: 0 0 30px;
width: 100%;
height: auto;
}
}
@media screen and (max-width: 600px) {
article {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
}
<article>
<img src="http://www.robfraser-photographer.co.uk/wp-content/uploads/2012/07/SHOT-9.jpg" />
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim ass.</p>
</article>
Please run the demo in full screen mode to see the responsive columns.
On a side not, you can actually span images without added wrappers as seen in my example.
To make it a little bit nicer I also added two media queries. The layout will go from 4 to 2 to 1 column based on the width of the screen. The nice part of keeping the image as the first element is that on smaller screens it will show up first.
I've also added a codepen example of what it would look like written in scss with the image height as a variable and using autoprefixer to keep the css a bit more clean. Since we're using column we of course limit the browser support but that seemed to be an ok solution.
http://codepen.io/stenehall/pen/yYEEva?editors=110
Please not that this solution only works in Chrome and Safari but not Firefox. Since firefox does not yet support column-span https://developer.mozilla.org/en-US/docs/Web/CSS/column-span.
According to that article Internet Explorer should work but I've not tested it.
tag with a huge text block inside it. That's really not an ideal way of writing. A
tag is supposed to just be one paragraph of text. A more ideal markup would, imho.
...