While the web have come a long way since spacer gifs creating more advanced layouts is still tricky at times.
I found an interesting layout question on Stack Overflow some time ago. The author wanted a four column layout with an image spaning 3 columns. A simple layout it would seem, but for html/css it’s actually rather tricky to get it done in a good way. If you’re ok with dropping support for older browsers you can use
column with some added browser prefixs and get about 95% browser coverage.
A four column layout is very simple to achieve and will look something like this (note that I’m using scss and an autoprefixer).
But when adding an image above it you can either add it outside the article and there by bypass the columns entirely or give it a
column-span and expand the image to all four columns. The end result will be something like this:
But no matter how we add the image it will not affect all 4 columns. In the above example I’m also using
column-span that’s actually not supported in Safari yet. So firstly, we need to figure out how to only span 3 columns, secondly we need to make the solution work for Safari.
To solve this we’ll be using a negative margin and instead of using column-span we’ll absolute position the image.
Now, lets add some extra styling and a caption for the photo to make the final touch.