boxes adding up to 100% of the browser

I want to have 2 boxes right next to each other, one with a fixed width, and another with a width that will change based on the size of the browser. The box has overflow:auto, and I'm trying to get the first box to act as a side bar that will follow you down the page. But of course I can't seem to achieve this, and have come here hoping someone could give me some examples,开发者_开发问答 or point me in the right direction.

Thanks!

To achieve the layout you asked try something along these lines:

HTML:

<div>
    <div id="col1">Left Navigation Menu</div>
    <div id="col2">Right Content</div>
</div>

CSS:

#col1
{
    position:fixed;
    width:400px;
}

#col2
{
    position:absolute;
    left:400px;
}

Will I was trying to think of a good way to do this in CSS, I was channeling my google-fu and found...

http://plugins.jquery.com/project/jStickyScroll

"This plug-in allows you to keep a div element at the top of the browser window when scrolling down a page. The most common use is to keep a sidebar navigation menu from disappearing when scrolling to the bottom of a web page."

You could maybe try...

#element{
   position:fixed;
}

Although this doesn't work without hacks in IE6, see http://www.howtocreate.co.uk/fixedPosition.html

Give this a go (I hope this is what you are after?):

See a live demo here: http://jsfiddle.net/VcecU/

HTML

<div class="main_container">
        <div class="content_a">1</div>
        <div class="content_lotsoftext">Start. Lots of text goes here! Finish. </div>
    </div>

CSS

.main_container{
    background-color:#ccc;
    overflow:auto;
    zoom:1;
}

.content_a{
    width:60px;
    float:left;
    background-color:#3FF;
}

.content_lotsoftext{
    float:left;
    background-color:#FCF;
    margin:-20px 0 0 60px; /* -- Need conditional for IE6 and 7 to remove the margin to get it to work in those browsers --*/
    /*-- The following classes help it to sit better in IE6 and 7 --*/
    clear:left;
    display:inline;
}

Please note, you will need a IE6&7 conditional to remove the margin, clear and display classes from .content_lotsoftext