右浮動內容在左浮動內容下方

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的寬度，否則它將嘗試通過調整自身大小來適應您放入其中的數據量。