Prevent Overlapping div's in CSS

Question

I'm trying to make a page with CSS where contents from divs don't overlap each other. When content overflows from the main div (the white area), scroll bars appear and you can scroll over the contents of the sidebar and header (ignore the red line text ... this is just my debugging info).

I didn't separate the CSS from the HTML so I apologize for the messy layout. The style tags in divs are what I'm using to position the content on the page.

The code for this can be found at https://jsbin.com/gesuser/edit?html and also the bottom of this post.

How do I prevent the main div from scrolling over the header and sidebar? I could do this using frames but I would rather not use that old tech. :)

Should be like this: and not like this:

Any help would be greatly appreciated.

    <div class="container">
        <div class="header" style="position: fixed; width: 100%; height: 50px; background-color: #133068;">
            <div id="appname" style="float: left;">
                <a href="index.php"><label style="position: relative; top: 12px; left: 5px; font: bold 20pt/22pt 'Syncopate', Arial, sans-serif; color: white;">Bluebook</label></a>
            </div>

            <div id="searchbar" style="position: fixed; float: right; top: 12px; right: 20px;">
                <form id="" name="form_Search_All" action="search.php" method="post">
                    <input type="text" id="text_Search" style="width: 350px;" name="text_Search" placeholder=" search all departments" />
                    <input type="submit" name="btnSearch_All" value="+" />

                    <input type="radio" id="radio_Search_BB" name="radio_Search" value="BB" checked /><label style="color: white;">BB</label>
                    <input type="radio" id="radio_Search_RC" name="radio_Search" value="RC" /><label style="color: white;">RC</label>
                </form>
            </div>
        </div>

        <div class="sidebar grad" style="position: fixed; top: 50px; width: 200px; height: 100%; background-color: #4e6799; z-index: -1;">
            <div class="btn-group" style="position: relative; top: 20px;">
                <?php if ($site->IsAdmin ()) : ?>
                    <a href="logout.php"><button class="button">ADMIN LOGOUT</button></a>

                <?php else : ?>
                    <a href="login.php"><button class="button">ADMIN LOGIN</button></a>

                <?php endif; ?>

                <a href="index.php"><button class="button">SEARCH PAGE</button></a>
            </div>

            <div id="version" style="position: absolute; bottom: 50px; margin: 5px; font: bold 9pt/11pt Arial; color: #9a9797;">
                <label>Version 2.0.0</label>
            </div>
        </div>

        <div class="main" style="position: absolute; top: 60px; left: 210px;">
            <?php $tpl->Component (); // this outputs tables of data ?>
        </div> <!-- main -->

    </div> <!-- container -->

Answer 1

Don't use absolute position for the main div. Use a relative and add margin to it:

<div class="main" style="position: relative; margin-top: 60px; margin-left: 210px;">
    <?php $tpl->Component (); // this outputs tables of data ?>
</div>