Brain Food for Web Developers

CSS layout design

Responsive Web Design – A 3 Column Layout

With different browsers and monitor sizes to take into consideration, web page layouts have always been unpredictable. These days it’s not just desktop computers but phones and tablets to think about as well. Now that mobile browsing is expected to overtake desktop browsing within the next few years, web developers have to think about how their sites will appear on mobile devices.

In his recent newsletter “Mobile Site Vs. Full Site“, usability expert Jakob Nielsen recommends that developers “build a separate mobile-optimized site” to accompany their full screen websites. Google, for example, has a mobile-optimized version of it’s homepage. This approach allows designers to fine-tune the site for screen sizes and peripherals (for example, drop down menus are often removed on mobile versions because they don’t work well with touch screens). Nielsen recommends trimming or deferring content (e.g. reduce words), enlarging interface options, and cutting out features that aren’t  necessary.

The Responsive Approach

Responsive Design - Layout that adapts to different screen sizes.

For those who can’t afford to dedicate the time and energy developing an entirely separate mobile-optimized website there is always responsive web design. Responsive web design makes use of the CSS media query which allow the developer to specify styling for different screen sizes. Just try resizing your browser window now and you should see this webpage respond to the new dimensions.

If you’re new to responsive layouts and want to learn more then I recommend reading Nick La’s (of Web Designer Wall) article “Responsive Design in 3 Steps“. He also has a more in-depth tutorial called “Responsive Design with CSS3 Media Queries” which is well worth reading.

The 3 Column Design

A 3 column layout that responds to the screen size

Having experimented with Nick La’s demo layout I decided to modify it to include 3 columns instead of 2.

View 3 column responsive layout

or play with it on codepen

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 also added an awesome responsive JQuery slideshow plugin, courtesy of Viljami Salminen.

Lastly, to get the responsive images, I used a handy little snippet of code in the CSS:

img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */

[Updated]: Is Responsive Design important? Read my other post about the pros and cons of responsive layouts.

If you decide to play around with the layout further then please leave a comment and let me know how you got on.

Author: Graham

My name is Graham and I'm a Scottish web developer living in California. I love working with clean code to make attractive and usable websites. I'm also interested in cooking, gardening, and taekwondo.


  1. Hi Graham!!

    Nice post!!!

    I read here that we should use “em” in place of “px”.

    Is there a real difference between them?


  2. Hi Marcos,
    Thanks for posting your comment!
    You’ve asked a good question.
    “px” is an absolute unit of measurement which is based on the screen resolution, whereas “em” is a relative unit of measurement based on the size of the font (where 1em = height of the current font size).
    For the purposes of responsive design I used “px” for the media queries (as did Ethan Marcotte in the A List Apart article) since we know the screen resolution of specific devices.
    Often “em” is useful for font-sizing (headers) or for margins, as demonstrated in this post by Nick La: 5 Useful CSS Tricks for Responsive Design.
    I hope this has been of help to you. Let me know if you have any other questions.

  3. Hi Graham, great job!

    Can we download your modified template above and use it?

    Also, if I put a simple vertical navbar in the right column using an unordered list, will it scale at all three screen resolutions?

    What method do you recommend for putting a navbar in this template?

    Keep up the good work,


    • Hi Matt,

      Thanks for your comment! Feel free to use the template any way you see fit.

      A vertical nav bar should scale nicely in the third column. You can use the @media query if you want it to display differently at varying resolutions.

      Here’s a list of 100 great CSS menu tutorials (the vertical menus begin at #75).

      I hope you find the template useful. Let me know how you get on.


  4. Hi, that’s cool. Problem occurs if I want all three columns to have the same height (height 100%) and still be responsive. Any suggestions?


  5. Hi Matt,

    I just starting in responsive development and love you nice simple code. I used a template for my first try with the hope of learning from it, but it was so convoluted and this is why I’m here. I’d like to use your template, it’s almost the exact layout other than the three columns I want a left two thirds and a right one third. Do you have somewhere to download the template or just via the source code?
    Thanks for such a lovely simple clean template.

    • Hi Vicki,
      At the moment the code is only available via the source code but I’ll work on setting up a link to make downloading the template easier.
      Feel free to use and modify it any way you see fit. Let me know how it works out.

      • Hi Graham,
        Many thanks for the reply, I’ve been working on the code and have to say a big THANK YOU for making something that had me spinning my wheels into something I’m able to work with and understand much better than I was.

        The code is so clean, which is something I was finding difficult with other templates I was trying to learn from. I’ve been doing CSS websites for some years but like to keep things clean and not have convoluted code that looks clever but in reality doesn’t do much, so your template has been a joy and it’s working!!

        • HI Vicki,
          I’m glad the code is proving helpful. It’s good to hear someone is putting it to good use. Let me know how it works out. I’m always interested to see how these things develop.