Question: I want to have a 2 column layout, and have the left column able to be 200 px at first, and have a "shrink" button to shrink it down to 10px, and have the right column expand to fill all the rest of the available space. Then if they click on the "show" button (which will be all they see in the now 10px wide left column) have the left grow back to 200px and have the right column shrink by that amount.

I can't figure out how to make the right column grown and shrink without knowing the exact width of the window.

I hope this makes sense, and I really hope someone can point me in the right direction.

Browser requirements are IE8, FF3.6, Safari, and Chrome, so in theory I can use some advanced CSS techniques. At least I don't have to support IE6.

Answer: 
Something like this should do the trick:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Demo</title>
        <style type="text/css" media="screen">
            html, body { height:100%;}
            #container { overflow:hidden; height:100%; }
            #sub-content { background:yellow; float:left; height:100%; width:200px; }
            #main-content { background:red; height:100%;}
            #container .shrink { width:10px; }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="sub-content">
                Sub content
                <a id="toggler" href="#">Toggle</a>
            </div>
            <div id="main-content">
                Main content
            </div>
        </div>
    </body>
    <script type="text/javascript">
        var link = document.getElementById('toggler');
        link.onclick = function() {
            var subContent = document.getElementById('sub-content');
            if (subContent.className == 'shrink') {
                subContent.className = '';
            } else {
                subContent.className = 'shrink';
            }
            return false;
        }
    </script>
</html>

```
it would help if you put your sample on <http://jsbin.com/>, but try the following:

html, body, form
 {  

 height: 100%;
 margin: 0px;
 padding: 0px;
 }
and then make the right column width 100%.

Is this what your are looking for?: <http://jsbin.com/uweqe3>