How to fit dynamic content container between three fixed containers

Here is my code. http://jsfiddle.net/LuSBF/2/

<div class="headmenu">
    <div id="logo"></div>
</div>
<div class="leftmenu">
    left
</div>
<div class="rightmenu">
    right
</div>
<div class="maincontent">
    Lorem Ipsum i...

    <div class="footer">
        footer
</div>
</div>

Top, left and right are fixed and .maincontent must fit in them no matter the size of the window. Currently .maincontent overflows the available space and causes horizontal scrollbars.

.headmenu { background: #141414; height: 60px; width: 100%; position: fixed; top: 0; }
.leftmenu { background: #c11718; height: 100%; width: 100px; position: fixed; margin-top: 60px; top: 0; }
.rightmenu { background: #141414; height: 100%; width: 200px; position: fixed; margin-top: 60px; right: 0; top: 0; }
.footer { background: #141414; height: 60px; width: 100%; bottom: 0; }

#logo { background: url('imgs/logo.jpg'); width: 181px; height: 50px; margin: 5px 0 0 0; }

.maincontent { width: 79%; border: 1px solid blue; margin: 60px 200px 0 100px; }

How can I get .maincontent to fill only the available space between the header, right menu and left menu?

Solution

Update .maincontent to this:

.maincontent { margin: 60px 200px 0 100px; }

There is no need to specify the width of this block-level element (since you want it fill the screen minus the margins). And without the proper box-sizing the border adds scrollbars.

You might also want to reset your CSS;

html, body { margin: 0; padding: 0; }