I have a more complex solution which I reduced for sample:

```
<html>
<body>
    <div id="top_bar" style="position:fixed;width:100%;background-color:red;"> 
        <div style="position: relative; width:200px;height: 50px;background-color:black;"></div>
    </div>
    <div id="navigation_bar" style="position:absolute;left:0;top:30px; background-color:orange;width:200px"> 
        <ul>
            <li>Menu 1</li>
            <li>Menu 2</li>
            <li>Menu 3</li>
        </ul>
    </div>
    <div id="content" style="position:absolute;left:200px;top:30px; bottom:0;right:0">
        <div  style="position:absolute;left:0;top:0; bottom:0;right:0;background-color: blue">
        </div>
    </div>
</body>
</html>

```

<http://plnkr.co/edit/DC51eyvQJVuIlPyiQIr4?p=preview>

Basically, I have a top bar, a left bar and some content in html. The problem is top bar height is not fixed (as it is set in my example), and I want the left bar and content to start after end of top bar. In sample the content/left bar overlap the top bar which should not happen, those should be one after the other. Any ideas how can I fix this (would prefer minimum code changes)?