CSS Floated Div Layout Problem incl. <PRE> code block

I have a simple 2-column CSS layout with floated divs.

The LEFT column has a fixed width of 290px. I want the RIGHT column to occupy the rest of the display.

However, in the RIGHT column, I have a <pre> block containing some code. I want the code to scroll horizontally (inside of its container, the browser window itself must NOT scroll) when it exceeds the maximum width of the page.

This is my current CSS:

#Left {
    width: 290px;
    float: le开发者_如何学编程ft;
}
#Right {
    float: left;
}
.code {
    overflow-x: scroll;
}

The obvious problem right now is that without placing a fixed width on the code block or the RIGHT column, it will move to display below the LEFT column (instead of right next to it) whenever the code block contents exceed the remaining width of the screen.

Any ideas? Thanks in advance.

Just remove float: left; from #Right

#Left {
    width: 290px;
    float: left;
}
#Right { }
.code {
    overflow-x: scroll;
}