fixed div overlaps other div in container
<p>I have two divs in a wrapper. One floats left at 20% width, one floats right at 80% width. Both have a max width of 2000px with auto margins in order to center the content. The problem I'm having is that at a larger width, the divs begin to overlap and I cannot figure out how to get them side by side regardless of the width. </p>

<p>Here is my html: </p>

<pre><code>&lt;body&gt;
&lt;div class="wrapper"&gt;
&lt;div class="container"&gt;
&lt;/div&gt;
&lt;div class="slider"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>Here is my css</p>

<pre><code>body
    {
    background-color: #3F3F3F;
    }


.wrapper
    {
    width: 100%;
    height: auto; 
    max-width: 2000px;
    margin-left:auto;
    margin-right:auto;
    } 

.container
    { 
    width: 20%;
    background-color:#F6F6F6;
    height: 200px;
    float: left;
    position: fixed;
    max-width: 2000px;
    margin-left:auto;
    margin-right:auto;
    }

    .slider {
        width: 80%; 
        height: 2000px;
        float: right; 
        position: relative;
        background-color: #8A0002;
        opacity: .2;
        max-width: 2000px;
        margin-left:auto;
        margin-right:auto;
        }
</code></pre>

<p>I'm a student and really appreciate any help!!! </p>