css float - CSS floating not working with height set to auto -

so trying have leftcontent div floated left, rightcontent div floated left , position content div inbetween them. when adjusted height of album div actual pixel size instead of auto worked fine, height being auto doesn't float divs properly.

to see current code doing can go http://www.robhorlacher.ca/images.php give at.

html

    <?     print "<div id=\"ccontainer\">";     $execute_statement = "select count(*) imagealbums";      $results = mysql_query($execute_statement) or die ('error executing sql statement!!!');      $entries =  mysql_fetch_row($results);      $rownumber = $entries[0];      $totalperpage = 3;      $totalpages = ceil($rownumber / $totalperpage);      if (isset($_get['currentpage']) && is_numeric($_get['currentpage'])) {          $currentpage = (int) $_get['currentpage'];      } else {          $currentpage = 1;     }      if ($currentpage > $totalpages) {          $currentpage = $totalpages;     }      if ($currentpage < 1) {          $currentpage = 1;      }      $offset = ($currentpage - 1) * $totalperpage;       $execute_statement2 = "select * imagealbums limit $offset, $totalperpage";      $results2 = mysql_query($execute_statement2) or die ('error executing sql statement2!!!');              while ($row = mysql_fetch_array($results2)) {              $albumid = $row["albumid"];             $album = $row["album"];      print "<div id=\"album\">";      print "<div id=\"titlebar\">";      print "<div id=\"lefttitle\"></div>";     print "<div id=\"title\">";     print "<br>";     print "<br>";     print $album;     print "</div>";     print "<div id=\"righttitle\"></div>";     print "<div id=\"titlefooter\"></div>";      print "</div>";      print "<div id=\"contentarea\">";      print "<div id=\"leftcontent\"></div>";     print "<div id=\"content\">";      $execute_statement3 = "select * images albumid = $albumid";          $results3 = mysql_query($execute_statement3) or die ('error executing sql statement3!!!');              while ($row2 = mysql_fetch_array($results3)) {              $picture = $row2["extensions"];             $description = $row2["description"];      print "<div id=\"image\">";     print "<br>";             print "<a href= \"uploads/$picture\" rel=\"shadowbox\">";             print "<img src = \"uploads/$picture\" width=\"162\" height=\"162\">";             print "</a>";             print "</a>";             print "<br>";             print $description;     print "</div>";             }      print "<div id=\"imgfooter\"></div>";      print "</div>";      print "<div id=\"rightcontent\"></div>";     print "<div id=\"footercontent\"></div>";      print "</div>";      print "</div>";               }     print "</div>";  css   @charset "utf-8"; /* css document */  * {     margin: 0px;     padding: 0px;     margin: auto;     border-top-width: 0px;     border-right-width: 0px;     border-bottom-width: 0px;     border-left-width: 0px; }  body {     background-color: #000;  }  #ccontainer {     width: 900px;   }  #ccontainer #album {     width: 900px;     height: auto;  }  #ccontainer #album #titlebar {     width: 900px;     height: 136px;   }  #ccontainer #album #titlebar #lefttitle {     width: 26px;     height: 136px;     float: left;     background-color: #161616; }  #ccontainer #album #titlebar #title {     width: 211px;     height: 136px;     float: left;     background-image: url(../images/album_title.jpg);     font-family: "lucida sans unicode", "lucida grande", sans-serif;     color: #161616;     text-align: center;     vertical-align: bottom;     font-size: 28px; }  #ccontainer #album #titlebar #righttitle {     width: 663px;     height: 136px;     float: left;     background-image: url(../images/right_albumtitle.jpg); }  #ccontainer #album #titlebar #titlefooter {     width: 900px;     clear: both; }  #ccontainer #album #contentarea {     width: 900px;     height: auto; }  #ccontainer #album #contentarea #leftcontent {     width: 118px;     height: auto;     background-color: #161616;     background-image: url(../images/under_albumtitle.jpg);     float: left;     background-repeat: no-repeat; }  #ccontainer #album #contentarea #content {     width: 694px;     height: auto;     float: right;     background-color: #161616; }  #ccontainer #album #contentarea #rightcontent {     width: 88px;     height: auto;     float: right;     background-color: #161616; }  #ccontainer #album #contentarea #footercontent {     width: 900px;     clear: both; }  #ccontainer #album #contentarea #content #image {     width: 217px;     height: 207px;     background-image: url(../images/image_box.jpg);     font-family: verdana, geneva, sans-serif;     color: #000;     margin: auto;     text-align: center;     float: left; }  #ccontainer #album #contentarea #content #imgfooter {     width: 694px;     clear: both; } 

this happening, because div's empty. div either has have content or specified height show on page. being said, think see trying do. here settings changed:

#ccontainer #album #contentarea {     background-color: #161616;     height: auto;     width: 900px; }  #ccontainer #album #contentarea #leftcontent {     background-color: #161616;     background-image: url("../images/under_albumtitle.jpg");     background-repeat: no-repeat;     float: left;     height: 207px;     width: 118px; }  #ccontainer #album #contentarea #rightcontent {     background-color: #161616;     float: left;     height: 207px;     width: 88px; }  #ccontainer #album #contentarea #content {     background-color: #161616;     float: left;     height: auto;     width: 694px; }