Fixed positioning overlap issue

Question

I am in a corner with this one. I have a layout with 2 containers. One of the containers represents a map (#main) and needs to stay in user view at all times, the other one (#sub) serves as a scroll-able content. Everything looks fine if content fits horizontally. However as soon as the horizontal bar appears (resize the window to replicate), the scroll-able content overlaps the fixed content and I am out of ideas how to fix it. I know of one way to fix it by positioning the fixed content absolutely instead and useing javascript to adjust its position from the top. Is there any way to fix it?

Sample code is below:

Html:

<div id="content">
    <div id="main">main</div>
    <div id="sub">
        <strong>Sub</strong><br />
        sub<br />
        sub<br />
        sub
    </div>
</div>

Css:

#content {
    width: 1200px;
    margin: 0 auto;
}
#main {
    position: fixed;
    width: 849px;
    height: 500px;
    background: red;
}
#sub {
    position: relative;
    float: right;
    width: 350px;
    height: 3500px;
    background: green;
}

JSFiddle link

Answer 1

Based on your comments it sounds like not allowing the user to scroll will solve the issue:

body {
  padding: 0;
  margin: 0;
  overflow-x:hidden;
 }

If you want them both to scroll you have to remove the fixed positioning:

#main {
position: relative;
width: 849px;
height: 300px;
background: red;
font-size: 50px;
text-align: center;
padding-top: 200px;
    float:left;
}