This is the best I could come up with. Its not perfect, but it does what you asked for as best as possible in css. A better solution would be to either make them all constant width or make the center one expand.

The grey background is just for indication. I would set it background to transparent, so it looks like the body background is the background of the sidebars. Then I would give them a border-bottom.

Code:
html, body{
width: 100%;
margin: 0;
padding: 0;
background: #99CCFF;
min-width: 800px;
}
#mainleft{
padding: 10px;
float: left;
width: auto;
background: #CCC;
height: 500px;
max-width: 20%;
margin: 0 -20% 0 0;
}
#maincenter{
padding: 10px;
border: 1px solid #000033;
width: 400px;
background: #FFF;
height: 500px;
margin: 0px auto 0px auto;
position: relative;
}
#mainright{
max-width: 33%;
padding: 10px;
float: right;
width: auto;
background: #CCC;
height: 500px;
margin: 0 0 0 -20%;
}



<div id="mainleft">
this is to the left. If I keep writing it will eventually break.
</div>
<div id="mainright">
this is to the right
</div>
<div id="maincenter">
this is center
</div>