HTML/CSS Fixed positioning causing overlapping divs

I am trying to create 2 side banners (left and right) with fixed positioning, and a centered container for the content.

The problem is that when minimizing the screen, the 2 side banners cover the centered container. I need a CSS solution to set the minimum width of the view to 860px; after which, the window becomes scrollable and divs do not overlap. The perfect solution is:

The HTML I am using is as such:

<div class="left" style="position:fixed; height:100%; background-color:#7fb4dd; top:43px; left:0px; width:180px;">
</div>

<div class="center" style="margin:100px 180px 0 180px;">
        <div style="width:100%;">
                        <div style="width:500px; margin:0 auto;">
                        </div>
            </div>
</div>

<div class="right" style="position:fixed; height:100%; background-color:#7fb4dd; top:43px; right:0px; width:180px;">
</div>

The above code prevents the left bar from overlapping the center container; but the problem is still present with the right bar.

This is a fiddle of the code: preview