css sidebar positioning with a margin keeps sinking

I have this html page:

<div id="ParentHasAbsoluteHeight" style="float: left; width: 600px; height: 537px; background-color:red;">
<div id="leftside" style="float: left; overflow:scroll; height: 100%; width: 200px; background-color: blue"> 
    <div id="sidebar" style=" background-color: green; margin-top:20px; height: 100%; overflow-y: scroll;">
        side
    </div> 
</div>
<div id="rightside" style="background-color: yellow; margin-left:201px; overflow:scroll; height:100%">
</di开发者_开发问答v>
</div>

basically I want div#sidebar to have 1. full height and width 2. margin-top:20px 3. Not sinking inside its parent (the full scrollbar should still be showing).

I managed to do it with tables (or display:table) but I wonder if there is a way to do it without tables.

Thanks

The height of the elements will always vary based on the content. As far as I know, the only way to have a sidebar like this is to a.) use tables like you've said (but I wouldn't suggest) or use a background image. Make a 1px high image that is the width of your Parent div & background color of your right div. Then make a box the width of your sidebar & background color and place it on the left side of the image. (Alternatively if you want colors for your margins to show, or have 3 columns, ect. you can adjust the image & colors accordingly.) Use this image as a vertically repeating background image for your parent div.

#ParentHasAbsoluteHeight {
  width: 600px;
  height: 537px;
  background: url(full-height-sidebar.jpg) top center repeat-y;
}

Try adding position:relative; to #leftside.