In the previous layout of this site, the content was aligned to the left side of the browser window. The columns on the right would either sit next to each other or duck below one another if space was limited. That is easy to accomplish with CSS and the default behavior that floating blocks have.
My current design differs in the sense that it sits in a block that is centered on the screen. It has a fixed width, because using percentages produced unwanted effects in small and large resolutions. It would either waste space, or stretch the content to such extend that the lines of text lose their readability.
For this site to have three well sized and fixed size columns on the screen, an alternative layout is required when the browser’s width falls below ~1100 pixels. Simon Collisons had just the solution for that. I currently use his excellent script to reassign classes to the block that contains all content as well as the block that contains the two columns on the side. To see it in action, resize your browser window and observe.
Obviously I am only using a fraction of the possibilities the script allows. For the whys, hows and thank yous read Simon’s article: Redesign Notes 1: Width-based Layout. You can grab the script there as well.
Leave a reaction
Keep it decent and to the point.