Show All | Hide Left | Hide Middle | Hide Right | 2 Column Right | Single Column Full | 2 Column Left - Overflow
This page is set up to demonstrate how to turn a three column layout into a two column (or one column) layout.
The code I used to achieve this effect is extreamly simple. The columns are all position: absolute with the middle column using both the left and right values. This enables it to have a little fluidness.
To achieve this effect, a small bit of php is used. When you make a selection from the menu above a different css style is called. and the display is aletered. So, yes it is basicly just a style switcher. There may well be more elegent php codes to do this, but I understand this one, so I used it.
The page calls upon two css style sheets, one estableshes the position of the menu bar above, and the text properties used. The second style sheet establishes the layout and position of the three columns.
By using a simple piece of php to change the second style sheet we can effect the layout of the Left, Middle and Right columns.
In reality, you can use the style switcher of your choice.
The secret to this effect lies in the property display. By giving this property the value of none we can suppress the display of the chosen column (or columns). For example, once you supress the right column, you modify the width of the middle column (in my example this is done by changing the value of margin-right.
I could of gone through this step by step and made it sound a lot more complicated then it is, but what would the point be?
If there is one truth about web design, it is that there is always more then one way to do anything.
Michael Foster of Cross-Browesr.com offers a javascript covered by a GNU Lesser General Public License. That is the same script used by sitepoint.