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).

To solve this we’ll be using a negative margin and instead of using column-span we’ll absolute position the image.