Three Column Responsive Layout

Three column responsive layout example

Back in the day, creating multiple columns in HTML was easy; a <table> tag, a couple of <tr> and <td> tags, and Bob’s your uncle.

These days, there’s CSS to consider. A tableless web design philosophy that is superior to the old table method. An ever-growing number of phones and tablets with varying screen sizes that means one size does not fit all.

But sometimes there’s still a need to display a nice column layout. Alienating mobile viewers with a table that won’t display properly on their devices won’t do. Creating an image to relay the content is inefficient, poor for SEO purposes, and hard on phone users’ eyes.

Enter this nifty bit of code thanks to Graham Clark: Three Column Responsive Layout.

This new 3 column design displays all columns on the largest screens as equal widths. As the screen gets smaller it will move the sidebar (third column) under the other two columns. Instead of removing the sidebar (third column) from the smallest screen I displayed all 3 columns on top of one another.

I have implemented a modified version of this code on a site I manage, and it works like a charm – very nice.