CSS Floated Div布局问题，包括<pre> code block</pre>

Question

我有一个带有浮动div的简单2列CSS布局。

LEFT列的固定宽度为290px。 我希望RIGHT列占据显示器的其余部分。

但是，在RIGHT列中，我有一个＆lt; pre＆gt;包含一些代码的块。我希望代码在超出页面最大宽度时水平滚动（在容器内部，浏览器窗口本身不能滚动）。

这是我目前的CSS：

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

现在显而易见的问题是，如果没有在代码块或RIGHT列上放置固定宽度，只要代码块内容超过剩余宽度，它就会移动到LEFT列下方（而不是右侧）屏幕。

有什么想法吗？提前谢谢。

Answer 1

只需从float: left;

中删除#Right即可

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