Layout with fixed divs scrollable?

Question

I am trying to get 3 horizontal fixed position static width div elements to be scrollable if the browser size is too small. Right now, if the browser size is shrunk to less than the total width of these 3 divs there is no scroll either horizontally or vertically.

NOTE the left and right panes should never move, only the middle pane should scroll when scrolling vertically.

Image example:

Here is my CSS for the left, middle and right panes in order:

#webcto_menu {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 150px;
    background-image:url(../images/webcto_120.png);
    background-repeat: no-repeat;
    background-position: top left;
    padding-top: 67px;
}
#page_contents {
    position: absolute;
    top: 0px;
    left: 160px;
    width: 450px;
}
#webcto_pane {
    position: fixed;
    top: 40px;
    left: 615px;
    width: 510px;
    height: 100%;
    border: 1px solid #A6C9E2;
    overflow: auto;
    background-color: #ffffff;
    background-image:url('../images/sp_bg_lrg.jpg');
    background-repeat: no-repeat;
    background-position: center center;
}

I also have a container around these divs:

#page_container {
    min-width:1100px;
}

and here are my HTML DIVs:

<div id="page_container">
    <div id="webcto_menu"></div>
    <div id="page_contents"></div>
    <div id="webcto_pane"></div>
    <div id="webcto_pane_menu"></div>
</div>

Can anyone help in keeping current design with scrolling enabled? I tried adding overflow: scroll; to the page_container but that will only scroll the center pane left/right while fixed elements do not move (which I think is the correct way fixed elemnts are supposed to work)

Answer 1

I'm not sure why you're using fix position divs. But the simplest solution would be to put the contents of each div into an iframe. That way you're sure to inherent the dimensions of the frame's content regardless of the defined width/height in your stylesheet. It will still respect the defined style but the overflow default is auto.

HTML:

<div id="container">
  <iframe id="one" src="http://www.ltg.ed.ac.uk/~richard/unicode-sample.html"></iframe>
  <iframe id="two" src="http://www.ltg.ed.ac.uk/~richard/unicode-sample.html"></iframe>
  <iframe id="three"src="http://www.ltg.ed.ac.uk/~richard/unicode-sample.html"></iframe>
</div>

CSS

#container{
    width: 1000px;
    margin: 0 auto;
    }
        #one{
        width: 328px;
        height: 1000px;
        float: left;
        }
        #two{
        width: 328px;
        height: 1000px;
        float: left;    
        }
        #three{
        width: 328px;
        height: 1000px;
        float: left;    
        }

In order to float each frame so they fit inline, you must take into account the 5px (varying depending on browser) necessary for the scroll bar. 1000/3 = 333 - 5 = 328