look at my solution here: http://jsfiddle.net/MdT6d/ (feel free to resize browser window as you like)
html:
<div class="app_body">
<div class="side_nav">
<div>one</div>
<div>two</div>
<!-- as much content here as you want -->
</div>
<div class="app_forms">
blah blah <!-- as much content here as you want -->
</div>
</div>
<div class="footer">footer</div>
css:
.app_body {
width:100%;
background-color: yellow;
}
.side_nav {
width:122px;
float:left;
background-color: blue;
}
.app_forms {
background-color: grey;
margin-left: 122px;
}
.footer {
height:38px;
clear:both;
background-color: red;
}
i stripped out the divs you added that weren't directly related to the question.. the trick is simply give app_body a left margin that is equivalent to side_nav width..
basically the height of siden nav will be the same regardless of how much content you add to the app_body.. but then you can make it appear as if side_nav's height is expanding along with app_body's height.. you just give it a background color (or a background image that repeats along the y axis if necessary)..
also if you add more content to the the side_nav then it grows naturally as well.. if it out grows the height of app_body.. you can do the same trick with app_body.. basically wrap both side_nav and app_body with a wrapper div and give it the same bacgkround color as app_body (if necessary) to make it seem as if it's height is also growing along with side_nav