Copy & paste the code below to embed this comment.
John Smith
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.
John Smith
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).
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?
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.)
57 Reader Comments
Back to the ArticleMurat Isik
I´m thanks for this website i have more information fo webdesign and css learning and inspired.
John Smith
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.
John Smith
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).
John Kelling
Your technique only makes sense combined with some other logic.
Vayira Natha
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?
Andre Tagesgeld
Awesome post, awesome discussion. I got enlighted for my new project. @All: thanks!
Ludwig Kannicht
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.)