Krieg gleiche Spaltenhöhe (mit Faux?) nicht hin

[Aladdin]

Eigentlich ist alles ja ganz einfach beschrieben: Faux

Einen aktuellen Screenshot hab ich mit faux.png angehängt. Wie man sich vorstellen kann, soll der linke Bereich weiss und der recht grau sein. Dazwischen ein Rand. Wie man sieht, reicht die linke Box aber nicht bis ganz unten

<div id="container">	
    <div id="title_area"></div>
    <div id="pic_area"></div>
    <div id="header_nav_area">...</div>
    <div class="clearboth"></div>
    <div id="sep_area_left"></div>
    <div id="sep_area_right"></div>

    <div id="nav_area">...</div>
    <div id="content_area">...</div>
	
    <div class="clearboth"></div>
    <div id="footer">...</div>
</div>

Interessant sind dabei die DIVs nav_area, content_area und der umlagernde container. (s. auch Screenshot 2)

Ich frag mich, wie ich nav_area und content_area gleich lang krieg. Besteht die einzige Möglichkeit darin, ein Hintergrundbild in container einzufügen, dass den Hintergrund für beide Bereiche und der Trennlinie komplett erhält? Das erscheint mir ziemlich unsauber. Ist das der Trick bei Faux?

Hier noch ein paar CSS-Infos:

#container{
  width:1000px;
  background: #efefef;
  margin:auto;
  padding-bottom:20px;
  text-align:left;
}

#nav_area{
  padding: 10px;
  color: #555;
  width: 280px;
  float: right;
  clear: both;
}

#content_area{
  color: #333;
  width:680px;
  margin: 0px;
  background: white;
  border-right: 1px solid #ddd;
  padding: 10px;
}