Crazy Framelike Scrollbars

See the blog post at http://abbysdoor.com/so-you-wanna-mimic-frames if you want some background on what the heck is going on here.

HTML

<div id="wrapper">
    <h1 id="pageWrapper">Stuff Stuff2 Stuff3 Stuff4 Stuff 5 Stuff 6 Stuff7</h1>
    <ul id="mainMenu">
        <li>Item1</li>
        <li>Item2</li>
        <li>Item3</li>
        <li>Item4</li>
    </ul>
    <div id="content">
        <h2>Content Title</h2>
        <div id="subcontent">
            And here is where the content goes.
            <br/>
            It only really has a certain width,
            <br/>
            but the client wants that gray
            <br/>
            background to resize with the right
            <br/>
            side of the browser window.
            And here is where the content goes.
            <br/>
            It only really has a certain width,
            <br/>
            but the client wants that gray
            <br/>
            background to resize with the right
            <br/>
            side of the browser window.
        </div>
    </div>
</div>

CSS

#wrapper {
	overflow: hidden;
	min-width: 400px;
    font-family: Arial, sans-serif;
    font-size: 12px;
}
#mainMenu{
	list-style: none;
    padding-left: 0px;
	width: 75px;
	float: left;
}
#content{
	float: left;
}
#subcontent{
	background-color: #D9D9D9;
	padding: 20px 30px;
	border-radius: 10px;
}
h1{
	margin-bottom: 20px;
	white-space:nowrap;
	overflow: hidden;
}
h2{
	font-weight: bolder;
	margin: 10px;
	font-size: 26px;
	color: #007ac0;
	text-transform: uppercase;
}

JavaScript

var resizer = function(){
    var w = $('#wrapper').width()-$('#mainMenu').width();
    if(w<275){ w=275; }
    $('#content').width(w);
};
resizer();
$(window).resize(resizer);