0

I'm trying to set up a simple two column layout using CSS3's columns but when I try and span an image across both columns, I'm getting some weird spacing issues.

If you look at this stupidly specific jsFiddle, you'll see that each time I have one of those "feature" images that spans both columns, I get this large gap above the image on both columns at most viewport widths (not counting the assumed blank space left by varied heights of images).

I'm using just the most basic of CSS3 here (prefixes not shown):

section {
    column-count: 2;
    column-gap: 10px;
}
.feature {
    column-span: all;
}

Any ideas?

Ryan
  • 656
  • 6
  • 9
  • Looks like it is a WebKit bug. Firefox doesn't support column-span, and it works as expected in Opera and IE10. WebKit is known to be quite buggy with multi-columns. It is one of the things Opera said they’d like to improve once they announced switching to Chromium. – David Storey May 13 '13 at 07:02
  • Have you taken a look at Isotope? (http://isotope.metafizzy.co/) I think it will accomplish what you want to do AND it's responsive and highly customizable. – Dave Rottino Nov 25 '13 at 14:59

0 Answers0