Home/ Questions/Q 703905
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T03:52:57+00:00

I want to have a 2 column layout, and have the left column able

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0