Advanced CSS tricks: How to span an image over multiple columns in a CSS3 site layout?


Tags: javascript,css,image,css3,design

Problem :

Given: A basic four-column layout with a simple continuous paragraph of text, along with just one photograph spanning three columns, top-right aligned. Now, how can we elegantly span our image over the final three columns in html/css3/js so that our text flows automatically around the image?

.

enter image description here

.

.quatroColumns{}             /* css multi column 4 columns */
.imageSpanning2Columns{}     /* align to top-right */
.imageSpanning3Columns{}     /* align to top-right */
.imageDescription{}          /* description box over image */

http://jsfiddle.net/Vbr9d/205/ (a pain to find where the image should go: not simple & not elegant start!)
http://jsfiddle.net/Vbr9d/206/ (looks ugly, but HTML starts elegantly seperating image & text pragraph!)


Forget older browser versions except major current ones FireFox InternetExplorer Chrome Safari. Any ideas, directions or experiments are welcome. Alternative javascript tryouts for splitting the paragraph text into different divs automagically are welcome too, but ONLY IF YOU'RE CERTAIN THAT CSS WON'T BE MATURED FOR THIS KIND OF BASIC LAYOUT UNTIL THE YEAR 2050.



Solution :

This is a cleaned up solution that should work in all major browsers. It relays on an absolute positioned image instead of using column-span since Firefox not yet supports that.

/* Just to make it look a little nicer */
body {
  font-size: 16px;
  line-height: 1.4;
  color: #333;
  padding: 1em;
}


article {
  /* We're giving our article a max-width. This isn't needed if a parent already does this.*/
  max-width: 860px;
  
  /* Create a 4 column layout */
  -webkit-column-count: 4;
     -moz-column-count: 4;
     column-count: 4;

  /* Give each column a little added spacing */
  -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
     column-gap: 20px;
     
  /* To be able to absolute position the image we need to give the parent a position */
  position: relative;
  
  /* This pulls up the first column of text to align with the image */
  padding-top: 225px;
}

article img {
  /* Absolute position our image */
  position: absolute;

  /* Place it in the top right cornet */
  top: 0;
  right: 0;

  /* Give it a height of 200px, this can of course be change if needed. If you update the height here make sure you also change the padding-top of the article and the negative margin later down. */
  height: 200px;
  
  /* We only want the image to spread 3 columns in width, that's 75% of the entire width. We also use 10px (half of the column-gap). */
  width: calc(75% - 10px);

}

/* Give the first paragraph a negative margin to pull it back up. (right now we're only using one parapgrah but if you'd want more in the future lets be specific here) */
article p:first-of-type {
  margin-top: -225px;
}

/* Some media queries to make it look nice on all resolutions */
@media screen and (max-width: 800px) {
  article {
    padding-top: 0;
    -webkit-column-count: 2;
       -moz-column-count: 2;
       column-count: 2;
  }
  article p:first-of-type {
    margin-top: 0;
  }
  article img {
    position: static;
    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.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.</p>
</article>

For a scss version of this look at the this codepen

This answer originally contained a solution using column-span (sadly not yet supported by Firefox). For reference I've added this solution as a separate answer to this question.


    CSS Howto..

    How to add new property within existing css?

    css, how to stop an element being squashed by container

    How to fix this flexbox alignment issue due to unsupported 'flex-grow' in IE10?

    How to increase rotate value

    How to keep an element :active even after clicking

    How to display heading and paragraph elements inline in css?

    How can I determine the background image URL of a div via JavaScript?

    How to get an HTML div to dynamically expand in a horizontal direction to fit window width?

    How to insert css arrow into html page and make it clickable

    How to change the input field's text color in MaterializeCSS?

    Off-canvas navigation: How to make a second-level menu slide in on top of first-level menu without covering body text?

    How to wrap text without whitespace? [duplicate]

    How to display a list in horizontal groups of li elements?

    How to style the entire first row of a table in css

    How to simplify cross-browsing css animation keyframe?

    How style selected option with CSS without styling all the other options?

    How to make images to go out of the div when width is over the max-width?

    Why are THs bolder than TDs and how to avoid it?

    How can I get rid of these shadows on my text in Internet Explorer?

    How do I make the box smaller in html?

    how to add string to the class javascript(jquery)

    How to navigate divs in a custom built single page app? [closed]

    How do I style the scrollbar of a textarea

    How to do page load in jQuery?

    How do I turn CSS into example HTML? Is there a shortcut to understanding affects of CSS on nested HTML tags?

    How to edit and see live CSS effect in IE8 like we see in Firefox > Web developer toolbar > Edit CSS function?

    How to alter hover effects for image button and embedded text?

    Large gap between text, how to fix?

    StackLayoutPanel Shows white ends at the rounded corners

    How would I go about applying some sort of dynamic range counter to jQuery and CSS?