Switchy McLayout: An Adaptive Layout Technique

by Marc van den Dobbelsteen

57 Reader Comments

Back to the Article
  1. I´m thanks for this website i have more information fo webdesign and css learning and inspired.

    Copy & paste the code below to embed this comment.
  2. I know the point of this article was the javascript, but I also want to use this resolution-based column remapping technique you used in example 2.  I really want to use a form of this technique, but I am new to using css.  I think this is a potential bug in your screen_med implementation and hopefully it is an easy fix.  To see the bug, go to my example here:
    http://www.mineisbetterthanyours.com/test/switchyBug/
    All I have done is copy and paste the last paragraph to make body tab A longer.  When you do this and view the page in screen_med, instead of the layout being A B on one line followed by C D on the next, the order becomes A B followed by another “line” which has blank space and then C on the right column, and then the D section wraps back onto a 3rd “line” and is on the left.  Does anyone know how to fix this?  I just want there to be 2 columns that properly follow each other without any weird space.  Thank you.

    Copy & paste the code below to embed this comment.
  3. Its also crucial that they do this without the css defining a fixed height of how tall each section is going to be… (although how tall is not what matters, it just matters when they aren’t the same height).

    Copy & paste the code below to embed this comment.
  4. Your technique only makes sense combined with some other logic.

    Copy & paste the code below to embed this comment.
  5. I am very interested in using a simplified version of this on the new (all css version) of my site, but I notice it doesn’t work in IE5. You always get a clientWidth of zero. I don’t know much jscript. Anyone know how to get round this?

    Copy & paste the code below to embed this comment.
  6. Awesome post, awesome discussion. I got enlighted for my new project. @All: thanks!

    Copy & paste the code below to embed this comment.
  7. It is not quite the same. But similar enough to be mentioned: Another possibility is to use a CSS
      * container with overflow:hidden and fixed width combined with
      * (sub)containers with fixed height. As many columns are displayed as possible (this means, part of the content won’t be visible on small screens.)

    Copy & paste the code below to embed this comment.