htmlcssinternet-explorerinternet-explorer-6

In IE6, and using divs, how to split entire page into two columns, left div with static width and right with elastic width?

I don't know if what am asking for is even possible in IE6, but here goes: I am working on a page layout and want to split the body into two container divs. I want to give the left div a fixed width of 200px; while making the right div elastic along the page's width. The right div's left border must be touching the left div's right border to make things clearer i made a diagram:
alt text

Solution

  • Example on jsfiddle: http://jsfiddle.net/Damien_at_SF/UhdHu/

    HTML:

    <html>
    <body>
        <div id="col_1">
            <p>column 1</p>
        </div>
        <div id="col_2">
            <p>column 2</p>
        </div>
    </body>
</html>

    CSS:

    html, body {
     height:100%;
     margin:0;
     padding:0;
     background-color:#000000;
}
#col_1 {
     height:100%;
     position:absolute;
     top:0px;
     left:0px;
     width:200px;
     padding:10px;
     background-color:#DBDBDB;
}
#col_2 {
     height:100%;
     margin-top:0px;
     margin-right:0px;
     margin-left:220px;
     padding:10px;
     background-color:#FFFFFF;
     overflow:hidden;
}

    sourced from: http://css.flepstudio.org/en/css-box-model/1-column-fixed-1-column-fluid.html

    hope that helps :)