Newspaper layout on the web

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

See the Pen 4 column layout with image in pure css by Johan Stenehall (@stenehall) on CodePen.

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:

See the Pen 4 column layout with image in pure css by Johan Stenehall (@stenehall) on CodePen.

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.

See the Pen 4 column layout with image in pure css by Johan Stenehall (@stenehall) on CodePen.

Now, lets add some extra styling and a caption for the photo to make the final touch.

See the Pen 4 column layout with image in pure css by Johan Stenehall (@stenehall) on CodePen.

Here I’ve added a very simple drop cap a slightly bigger font for the first paragraph and a caption for the photo. The end result is a newspaper feeling with cross browser support.