in Tutorials

Building Responsive Layouts: Redux

tl:dr version

  • new Demo
  • new CodePen
  • GitHub Repo
  • Adjusted codebase to use relative positioning and left floats. No longer using absolute positioning for fixed columns

Thank You for Your Feedback!

I wrote an article about building responsive layouts in December 2013. It has received a lot of traffic and great feedback. But there is a problem with the codebase, and I have a few commenters to thank for noticing the issue. If it wasn’t for the community using the code in their projects and providing feedback, I wouldn’t have noticed the problem. Thank you, readers!

The Problem

A few people responded that they experienced issues with the header and footer not rendering correctly above and below the content area. I looked into it and discovered that that the solution I crafted had a document flow problem; which caused some unforeseen problems in the responsive layout. By using absolute positioning on the fixed column, the element was effectively taken out of the document flow. That means that the HTML document is unaware of the height, width, and any content in that section. Which is why the footer will overlap with the column that is absolute positioned (if that column is taller than the fluid column). See the figure below:

Footer Overlap

A New Approach

The new approach is focused on maintaining proper HTML document flow. This approach provides ‘awareness’ inside the wrapper div (columns-container) so that it is always aware of the child divs. The wrapper div will always know the height and width of the divs, that way the HTML document will align things as we’d like inside and outside the container. The updated CSS looks like the following:


@media screen and (min-width: 47.5em ) {

  .columns-container {
      float: left;
  }

  .left-column {
    margin-right: 20em;
    float: left;
  }

  .right-column {
    width: 18.75em;
    margin-left: -19.3em;
    float: left;
  }
}

 

Breaking it down

columns-container: The columns-container has changed a bit and now includes a left float. This method allows the element to maintain awareness of the child divs. I’m actually not sure why setting a left float makes the DOM aware of the child divs. If anyone has insight into why this makes the container div aware of it’s child elements, please submit a comment. Below are screenshots of the behavior in Chrome’s DevTools.

Columns-container has a left float property:

Float Left

Columns-container does not have a float property:

No Float

left-column: There isn’t much different here. Added a bit more right margin (you can change this to your design needs) and added a left float to the class.

right-column: This class has the most change from the previous version. It no longer has absolute positioning. The class also has a left float and keeps the same width as the previous version (18.75em). One big difference here is the negative left margin. The left margin is a little bigger (19.3em) than the width of the div. This ensures that the right side of the div lines up with the header and footer.

Other changes

  • Updated the class names to follow a hyphen delimited naming scheme. I find this easier to read.
  • Added html5shiv.js to the project so that the header and footer elements will be recognized in the DOM and styled in IE8 and below.
  • The project now uses the adjusted box-sizing method detailed at CSS-Tricks.com
  • Three column layout has an extra media query to display a menu that spans the length of the browser window and displays two columns below it for screen sizes between 760px and 1000px.

Conclusion

I hope this updated approach helps others out there that are developing responsive layouts. Thanks again to the web development community for providing feedback! Feel free to comment on your approach, problems you are experiencing with this codebase, or any comments in general about the solution detailed here.

I updated the GitHub repo, created a new CodePen and also created a new demo page to reflect the changes.

Leave a Reply

16 Comments

  1. Hello Ryan, how can I change container order after resize – I mean 2 columns, right fulid, left fixed, and left will be bottom and right will be top, is it possibile?

    Best regards Jerzy

  2. Ryan,
    Thanks for the templates. So nice and clean. Wondering if anyone has noticed that images in the liquid column set with max-width: 100%; only scale in Chrome when re-sizing the browser? IE and Firefox freeze the width of the liquid column at the width of the image until the break point is hit and then all browsers scale the image properly.

  3. Ryan, first off all thanks for the template, I’m using the three column layout, is it possible that the side-nav column gets the same width as the right-column and that the template still stay responsive

    • Peter,

      Thanks for taking the time to leave a comment. Also, my apologies for not getting back to you sooner. I was on vacation last week and unplugged.

      Yes, you can have the side nav and right column the same width and keep the template responsive. A small bit of CSS needs to change.

      (1) .side-nav, update the width and margin-right to the following:
      width: 18.75em;
      margin-right: -19.3em;

      (2) .left-column, update the width like the following:
      margin-left: 19.7em;

      I created a new pen to better show this example. http://codepen.io/johnstonian/pen/RPJJNG

      Hope this helps. Please let me know if you need anything else.

  4. Ryan, thanks for some awesome code! Call me a dummy, but I can’t for the life of me resize the two columns. I would like the left one to remain fluid, but want the static right column to be 400pixels wide. I’ve played with the em numbers in your code, but just messed things up. Can you help me please?

    • @John,

      Thanks for leaving a comment. I’m happy the code was useful!

      To make the right column 400px, you’ll need to modify bits in the .left-column and .right-column classes.

      For .left-column, change margin-right to 26em.

      For .right-column, change width to 25em and margin-left to -25.5em.

      That should do the trick.

      Here is a jsfiddle for an example: https://jsfiddle.net/g6rozuxc/

      Hope this helps. Happy coding!

  5. Ryan, thanks a lot for this tutorial and sample code. I have tried using some of your code to change my web site into a responsive site. Your design is pretty slick on most of the pages I have tried. However, I have run into one problem, which you might be able to see if you change your “lorum ipsem” text for the left column.

    Left Column (fluid)

    Bacon ipsum dolor sit

    When there isn’t much content in the left column box, and I am viewing on full sized laptop screen (about 15 inches), the right column doesn’t line up with the right edge of the screen, but rather sits in the middle of the screen. Do you have a suggestion for this? So far, one work-around is to just use some more filler text in the html, in order to “push it out” to the right. That works but there might be occasions where this is not feasible.

    Otherwise, great design.

  6. Thanks so much for this Ryan. It is exactly what I was looking for. I’ve been searching for simple responsive templates for days with no luck until I found your site.

    Just one question. If I wanted to have a fixed width for the template so that the content does not get so long across wide screens (laptops, desktops), is there a way to implement this? With media queries or perhaps a separate style sheet? Ideally, I would like a left content column area of 600px and a right column of 250px centered across the screen.
    Thanks for your help!