One scroll bar for 2 separate divs - php

Question

I have two DIV's that are side by side. One div is my side bar (Left Of Screen), the other div is my main content (Right Of Screen).
What I'm looking for:
What I want is one visable scroll bar to the far right of the screen. I would like that scrol bar to scroll both left and right div's.
My Problem:
Currently my left sidebar has a tree menu. When I expand my tree menu, I have no scroll bar to scroll down through the side bar content that was expanded. I'm able to add a scroll bar to my side bar, but that looks very ugly. I just want 1 scroll bar on the far right that handles both div's.
Can someone help me on this one?
My index.php file
<?php
include 'sidebar.php';
include 'main_body.php';
?>
My sidebar.php
<?php
echo '<link rel="stylesheet" href="css/style.css" type="text/css">';
echo '<script type="text/javascript" src="js/jquery1_3_2.js"></script>';
include 'function/functions.php';
// Establish a connection to our database
db_connect();
echo'
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".content").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function()
{
jQuery(this).next(".content").slideToggle(500);
});
});
</script>
';
echo'<div class="sidebar">';
// Side Bar Start
echo '
<img src="images/hdc_logo.png">
<br>
<br>
<p class="heading"><strong>CUSTOMER</strong></p>
<div class="content">';
//Display all customers from database
query_all_customers();
echo '</div>
<p class="heading"><strong>CABINET</strong></p>
<div class="content">';
// Display all cabinets from database
query_all_cabinets();
echo'</div>
</div>';
?>
My main content area
<?php
ini_set('display_errors', 1);
echo '<div class="main">';
echo'
<br>
<br>
Some data can go here
<br>
<br><br>
<br>
and here
<br>
<br>
and here
<br>
<br>
Some data can go here
<br>
<br><br>
<br>
and here
<br>
<br>
and here
<br>
<br>
Some data can go here
<br>
<br><br>
<br>
and here
<br>
<br>
and here
<br>
<br>
Some data can go here
<br>
<br><br>
<br>
and here
<br>
<br>
and here';
?>
My .css file
.sidebar {
width:200px;
position:fixed;
top:0px;
left:0px;
height:100%;
background-color:#54524F;
/*overflow-y: scroll;*/
}
.main {
width: auto;
margin-left: 200px;
}
.heading {
margin: 1px;
color: #fff;
padding: 3px 10px;
cursor: pointer;
position: relative;
background-color:#000000;
}
.content {
padding: 5px 10px;
}
#submit {
width:185px;
background-color: black;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:6px;
color: #fff;
font-family:'Oswald';
font-size: 16px;
text-decoration: none;
cursor: pointer;
border:none;
}
#submit:hover {
border: none;
background:#FF9933;
box-shadow: 0px 0px 1px #777;
}
tr:nth-of-type(odd) {
background-color:#D4D4D4;
}
.container0 {
height: 100%;
width: 100%;
overflow-x: hidden;
position: relative;
padding-bottom: 30px;
background-color:black;
}
JSFiddle

Answer 1

in your css, set position of the sidebar to relative and set float to left, like this:
.sidebar {
width:200px;
position:relative;
top:0px;
left:0px;
height:100%;
background-color:#54524F;
float:left
}
the updated version of your jsfiddle to show you that it works :) http://jsfiddle.net/BrJDE/3/
because you dont want to have the scrollbar at the side of the page, i made some more examples for you. tell me if they are what you want, if its not, i would love to help you again.
both of these examples use 2 additional divs compared to the content you provided. these will make that you can position the scrollbar inside those div's instead of at the side of the browser. if you need me to explain the changes i made, just tell me.
scrollbar inside the page:
http://jsfiddle.net/BrJDE/6/
scrollbar inside the page at the left side of the scrolling div:
http://jsfiddle.net/BrJDE/5/