I'm a bit new to tableless designs, and I've run into a problem which I don't understand.

you can see my design here:


here's the html code:

<div class="white-container">
    <div class="white-top"></div>
    <div class="left-area"><div class="header-blue">Hello</div>
  <div class="content">
    <p>      Duis au.....</p>
      <div class="right-area">
    <div class="first-box">
      <div class="box-white-top"><img src="images/box_white_top.gif"></div>
      <div class="box-white-center">
        <div class="box-white-content">ddd dfadf dsaf asdf asdf asdfa <br>
        dfasdfasdf asdf asdf sadfasd fasdf asdf asdf ads </div><!--box-whitecontent-->
      <div class="box-white-bottom"><img src="images/box_white_bottom.gif" width="180" height="19"></div>
 <!--<div class="white-bottom"><img src="images/content_bg_bottom.gif" width="780" height="71"></div>-->
the background of the white-container div, doesn't extend to cover all the of the divs inside it....If I add a div at the end white-bottom it works, but extends a few pixels after the white-bottom div, and shows the background (which I don't want).

I simply don't understand why it isn't wrapping everything.