When decreasing width of window, design gets messed up. Increasing width = expected results

See: http://glados.cc/chat/layout.html

If you make the window smaller, the sidebar gets pushed to the bottom of the page. If you make the window bigger, it works. So you can make the window smaller then a tiny bit bigger and it will display both the content and sidebar at the same time, but I'd prefer 开发者_C百科if you don't have to do that.

I use javascript to resize the left element when the window is resized:

window.onresize = function(event) {
    document.getElementById("left").style.width = window.innerWidth - 160 + "px";
}

Okay, (hope I'm not about to make an ass out of myself) but playing around with the layout, I think I've got you a solution which doesn't need the JS.

I've wrapped the #left div in a shell, which I've positioned absolutely, with the following values:

#left-shell {
position: absolute;
right: 155px;
top: 5px;
left: 5px;
bottom:0;
}

I've then floated the #right div to the right, and given the left div a 100 percent width.

The same trick should work for the footer, but I just thought I'd throw this out there, to see if it suits your needs.

I've created a fiddle with the example: http://jsfiddle.net/Z98L3/