CSS fixed-fluid(overflow:auto)-fixed layout

what is the best possible way to implement layout like this ?:

+-------+  +--------------------------------------+ +-------+
| fixed |  |                                      | | fixed |
+-------+  |               fluid                  | +-------+
           |           overflow:auto;             |        
           |                                      |
           +----------------------------------开发者_高级运维----+

I need scrollbars to appear when it's too small to display content (images etc.).

Something like this would work as a starting point:

http://jsfiddle.net/8P4MX/1/

css:

body{
        padding     :0px;
        margin      :0px;
        text-align  :center;
    }

    div#container{
        height      : 100%;
        position    : relative;
        width       : 100%;
    }

    div#contents{
        background-color:#CCCCCC;
        border      : #000000 1px solid;
        clear       : none; 
        min-height  : 500px;
        margin-left : auto;
        margin-right: auto;
        overflow    : auto;
        position    : relative;
    }

    div.float{
        background-color:#CCCCCC;
        border      : #000000 1px solid;
        height      : 300px;
        position    : relative;
        width       : 150px;
    }

    div#left{
        float:left;
    }

    div#right{
        float:right;
    }

markup:

<div id="container">
    <div id="left" class="float">left</div>
    <div id="right" class="float">right</div>
    <div id="contents">fluid</div>
</div>

Don't set width on the main block and use margins wide enough to prevent it overlap fixed blocks.

i.g.

#fixed_left { float: left, width 200px; }
#fixed_right { float: right, width 200px; }
#main { margin: 0 210px; overflow: auto; }

In my personal layouts I prefer the 'absolute position' solution, like this:

This is the css code:

#container {
   position: relative;
}

#left {
   background-color: #FF0000;
   width: 200px;
   position: absolute;
   left: 0;
}

#center {
   background-color: #00FF00;
   margin: 0 200px 0 200px;
   position: absolute;
   overflow: auto;
}

#right {
   background-color: #0000FF;
   width: 200px;
   position: absolute;
   right: 0;
}

This is the html code:

<div id="container">
    <div id="center">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet libero non ligula fringilla sit amet adipiscing turpis commodo. Nullam semper orci nec lorem sodales ut ultrices tellus rutrum. Cras nisl metus, malesuada vehicula vulputate ac, ultricies eget ipsum. Donec vehicula leo nec erat placerat eget sollicitudin dui facilisis. Fusce leo ipsum, bibendum at mollis a, vestibulum sollicitudin ante. Nulla lacinia egestas leo, sed vestibulum quam laoreet sed. Cras tempor odio et risus volutpat ultrices. Curabitur in eros nec lectus dignissim adipiscing. Nunc ut dignissim augue. Nam neque leo, eleifend nec volutpat eu, convallis ut mauris. Pellentesque id nibh at enim iaculis tincidunt. Duis et nibh magna, ut fringilla nisi. Nulla volutpat, lorem ac aliquam rhoncus, erat tortor pretium augue, a rutrum orci ante vel tellus. Mauris vestibulum, leo in fermentum venenatis, dolor dolor egestas libero, cursus vestibulum lorem nisl eget neque.
        </p>
        <p>
            Suspendisse volutpat aliquet nulla non fermentum. Nam blandit, dolor eget euismod imperdiet, tellus arcu fringilla libero, et imperdiet quam est at ipsum. Donec tristique nulla nec libero ullamcorper sit amet suscipit est facilisis. Etiam egestas blandit justo a auctor. Duis sollicitudin vehicula diam, eget fermentum urna sodales at. Sed a hendrerit justo. Sed eu placerat erat. Donec sagittis suscipit ipsum, eu facilisis dolor placerat et. Nunc augue nisl, pulvinar id aliquet at, dictum in augue. Aliquam a neque vitae mi viverra viverra. In hac habitasse platea dictumst. Proin ac nibh purus. Morbi auctor sollicitudin lectus sit amet gravida. Cras lorem sapien, ullamcorper vitae lobortis non, laoreet non ante. Suspendisse quis erat leo.
        </p>
        <p>
            Maecenas lectus felis, lacinia eu luctus vel, sodales a nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam enim ipsum, viverra ac aliquam eget, lobortis et turpis. Vivamus porttitor aliquet metus id gravida. Nullam vel tincidunt turpis. Vivamus scelerisque vestibulum venenatis. Proin tempus fringilla adipiscing. Sed in metus vitae nibh mattis faucibus. Cras vitae purus eget tellus fermentum imperdiet. Proin at diam risus. Curabitur hendrerit nulla nec libero ullamcorper ultrices. Sed pretium blandit lectus non blandit. Phasellus ac ante et libero vulputate aliquet. Donec egestas viverra ligula, eget vestibulum magna mollis in. Praesent et metus nulla. Sed nec diam tristique urna consequat elementum. Quisque vel orci eget urna consectetur malesuada.
        </p>
    </div>          
    <div id="left">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet libero non ligula fringilla sit amet adipiscing turpis commodo. Nullam semper orci nec lorem sodales ut ultrices tellus rutrum. Cras nisl metus, malesuada vehicula vulputate ac, ultricies eget ipsum. Donec vehicula leo nec erat placerat eget sollicitudin dui facilisis. Fusce leo ipsum, bibendum at mollis a, vestibulum sollicitudin ante. Nulla lacinia egestas leo, sed vestibulum quam laoreet sed. Cras tempor odio et risus volutpat ultrices. Curabitur in eros nec lectus dignissim adipiscing. Nunc ut dignissim augue. Nam neque leo, eleifend nec volutpat eu, convallis ut mauris. Pellentesque id nibh at enim iaculis tincidunt. Duis et nibh magna, ut fringilla nisi. Nulla volutpat, lorem ac aliquam rhoncus, erat tortor pretium augue, a rutrum orci ante vel tellus. Mauris vestibulum, leo in fermentum venenatis, dolor dolor egestas libero, cursus vestibulum lorem nisl eget neque.
    </div>
    <div id="right">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet libero non ligula fringilla sit amet adipiscing turpis commodo. Nullam semper orci nec lorem sodales ut ultrices tellus rutrum. Cras nisl metus, malesuada vehicula vulputate ac, ultricies eget ipsum. Donec vehicula leo nec erat placerat eget sollicitudin dui facilisis. Fusce leo ipsum, bibendum at mollis a, vestibulum sollicitudin ante. Nulla lacinia egestas leo, sed vestibulum quam laoreet sed. Cras tempor odio et risus volutpat ultrices. Curabitur in eros nec lectus dignissim adipiscing. Nunc ut dignissim augue. Nam neque leo, eleifend nec volutpat eu, convallis ut mauris. Pellentesque id nibh at enim iaculis tincidunt. Duis et nibh magna, ut fringilla nisi. Nulla volutpat, lorem ac aliquam rhoncus, erat tortor pretium augue, a rutrum orci ante vel tellus. Mauris vestibulum, leo in fermentum venenatis, dolor dolor egestas libero, cursus vestibulum lorem nisl eget neque.
    </div>
</div>

Now I would like to note two details:

1. The content div (#center) must precede the left and right menu
2. The content div (#center) must be more long than left and right menu. Otherwise, it could overlaps a potential footer. In order to avoid this you must use 'clear:both' in the potenzial footer

P.S.: I tested the code on Firefox, Safari and Chrome and it was ok