Scrollbar causing fixed columns to stack

[DavidG]

I have a fixed sidebar containing 2 columns, each column has a fixed width & will overflow once their content is greater than the height of the browser window.The problem being once overflow is activated on both columns their combined width becomes greater than their parent container (even though it has no specified width) and the columns stack upon one another.I would like each column to have a set width, is there a way their container to expand to accommodate scrollbars when needed?http://jsfiddle.net/VkSWu/2/CSS\[code\]html, body { height:100%; margin:0; padding:0}#sidebar { position:fixed; top:0; bottom:0; background:blue; overflow:auto;}.top, .bottom, .middle { width:3em; color:#fff; display:table-cell; text-align: center; background:red;}.top{vertical-align:top;}.middle {vertical-align:middle; background:black}.bottom{vertical-align:bottom;}.top,.bottom{height:1px}.nav{ display:table; height:100%; table-layout:fixed; width:3em; outline: solid 2px black; float: right;}.content { height:100%; width: 17em; overflow: auto; display: fixed; float: left;}.tr{display:table-row}\[/code\]HTML\[code\]<div id="sidebar"> <div class="nav"> <div class="tr"> <div class="top"> <p>top stuff</p> <p>top stuff</p> <p>top stuff</p> <p>top stuff</p> </div> </div> <div class="tr"> <div class="middle"> <p>middle stuff</p> </div> </div> <div class="tr"> <div class="bottom"> <p>top stuff</p> <p>top stuff</p> <p>top stuff</p> <p>top stuff</p> </div> </div> </div> <div class="content"> <p> contents stuff</p> <p> contents stuff</p> <p> contents stuff</p> <p> contents stuff</p> <p> contents stuff</p> <p> contents stuff</p> <p> contents stuff</p> <p> contents stuff</p> <p> contents stuff</p> <p> contents stuff</p> <p> contents stuff</p> <p> contents stuff</p> <p> contents stuff</p> <p> contents stuff</p> <p> contents stuff</p> <p> contents stuff</p> <p> contents stuff</p> <p> contents stuff</p> <p> contents stuff</p> <p> contents stuff</p> <p> contents stuff</p> <p> contents stuff</p> <p> contents stuff</p> </div></div>\[/code\]