Ebenen mitwachsen lassen

[Tobias Stening]

Hallo zusammen,

ich habe hier folgenden Aufbau:

<div id="content">
  <div id="menu"></div>
  <div id="pad"></div>
</div>
<div id="news"></div>

Die Styles dazu sehen so aus:

#content {
  width: 446px;
  float: right;
  margin-top: 5px;
  background-color: #A0AFCB;
}
#menu {
  width: 422px;
  background-color: #F7CB33;
  padding: 13px;
  border-bottom: 5px solid #FFFFFF;
  float: right;
}
#pad {
  padding: 12px;
  color: #000000;
}
#news {
  width: 213px;
  height: 372px;
  margin-top: 5px;
  background-color: #778CB3;
  color: #FFFFFF;
  padding: 4px;
}

Nun füge ich in den Bereich mit der ID "pad" Inhalte ein. Er ist also immer so lang, wie es für den Inhalt nötig ist. Damit wächst die Ebene "content" entsprechend dem Inhalt in "pad", was ja auch erstmal so gewünscht ist. Wie muss ich es nun gestalten, damit "news" immer genauso lang ist, wie die Ebene "content"?

Skizze (so soll es sein):

|-------|--------------------|
| news  | menu               |
|       |--------------------|
|       | pad                |
|       |                    |
|       |                    |
|       |                    |
|       |                    |
|       |                    |

Skizze (so ist es aktuell):

|-------|--------------------|
| news  | menu               |
|       |--------------------|
|       | pad                |
|       |                    |
|       |                    |
|       |                    |
|       |                    |
|-------|                    |
        |                    |
        |--------------------|

Ich bin für jeden Tipp dankbar.

Viele Grüße,
Tobias :-)