Is it possible for fixed position elements to cause the body to scroll?

Question

I think I am missing something here, but I cannot for the life of me figure out how to do this.

I have a site with three columns:

• Menu Left (Fixed)
• Content Centered (Relative)
• Menu Right (Fixed)

I would like the site to have some sort of a minimum width so that if the browser is sized smaller than the width of the menus and the content, the user can still scroll horizontally to see the menus. With the fixed items, the menus are hidden outside the viewport. I know this doesn't quite make sense as the positioning is based on the window itself, but there must be a way to do this? (I think I'm almost asking if it's possible for an item to be fixed vertically and relative horizontally?)

I've tried building it with a single centered div with both menus floated left and right within it, but then there is an issue of the items overlapping and preventing clicking on the content or on the menus depending on the z-index.

I've tried putting in a single large, wide div to give a minimum width but the content shifts and of course the menus stay fixed in relation to the window itself. I've tried min-width on the body with the same results.

Endless thanks in advance, I feel like I am missing something obvious but am too tired to realize the solution. (Open to javascript suggestions too should it be necessary, ideally jQuery).

Here is a basic starting point to illustrate:

<style type="text/css">

    body {
        text-align: center;
    }

    #menuLeft, #menuRight {
        height: 300px;
        width: 170px;
        color: white;
        position: fixed;
        top: 10px;
        background: red;
    }


    #menuLeft {
        left: 50%;
        margin-left: -450px;
    }

    #menuRight {
        right: 50%;
        margin-right: -450px;
    }


    #menu ul {
        list-style: none;
    }

    #content {
        width: 500px;
        height: 800px;
        background: #ccc;
        margin: 0 auto;
    }

</style>

<div id="menuLeft">
    <a href="#">Menu Left</a>
</div>

<div id="menuRight">
    <a href="#">Menu Right</a>
</div>

<div id="content">
    <a href="#">Content</a>
</div>