Sorry if the title was confusing; I've included some screen shots to more clearly explain my problem. I have a page that has a side navigation menu on the left, and a main div (with the tables) on the right:

When the page is resized to be smaller, the "overflow-x:auto" property of the "main" div brings up a horizontal scrollbar:

However, when the window becomes narrow to the point that the "main" div reaches the border of the side navigation menu (with the title "Contents"), the "main" div ceases to continue producing the horizontal scrollbar and instead meshes with the menu:

Here is the CSS for the "main" div:

#main {
height: 100%;
width: 65%; 
min-width: 10%; 
float:right;
overflow-y: auto;
overflow-x: auto;
padding: 0 20px 20px;}

and the left side menu:

#sidenav{
margin-left: 20px; 
float: left;
overflow-x:auto;
overflow-y:auto;}

Both of those divs are encapsulated together in "container":

.container {    
bottom: 20px; 
left: 0; 
position: absolute; 
right: 0; 
top: 50px; }

How can I rewrite my code in such a way that the "main" div will continue to use its horizontal scrollbar, and never cross the boundary of the side navigation menu?

Thanks in advance!