右浮动内容在左浮动内容下方

Question

我有以下HTML：

<div id="page_title">
  <div id="left_title>
   <h1> MY LARGE TITLE </h1>
  </div>
  <div id="page_help">
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
  </div>
</div>

以下CSS：

#page_title
{
  width:960px;
  margin: 20px auto 0;
  overflow:hidden;
}
#left_title
{
  float:left
}
#page_help
{
  float:right
}

当 page_help div包含大量内容时，它会在 left_title 下面，这不是我想要的。我希望left_title始终位于page_help容器的左侧。 此图显示（非需要）行为

这就是我想要的：

为了有这种行为，我错过了什么？

Answer 1

如果在div上设置宽度，那么您将获得所需的行为。问题是page_help div试图占用尽可能多的页面宽度。

Answer 2

您需要设置 #page_help 的宽度，否则它会尝试通过调整自身来适应您放入其中的数据量。