Hi, Paul. I love your CSS innovations and examples, they work great. I implemented your 3 equalizing col layout +header +footer. It works great as is, but I had the idea to allow the left column to be collapsable similar to the the Sitepoint left navigation column.

I used the following javascript code to manipulate the "outer" element's margin:

var toggle = false;
function hide() {
var outer = document.getElementById('outer');
if (toggle) {
toggle = false;
outer.style.marginLeft = "250px";
} else {
toggle = true;
outer.style.marginLeft = "0px";

I thought by setting the outer element's margin to be 0, it would push the left column off the screen. This works great on Firefox, Netscape, and Opera, but for I.E., the contents of the left column stays on the screens and overlaps the contents of outer. What's worse is that when I restore the left column, the contents of the left column gets pushed back with the contents of outer and they stay overlapped.

I was just wondering if there's hack for this or maybe I should do this in another way.

Here's the link:

click on the home tab to collapse column

Thanks in advance.