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%">
</div>
</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