CSS floating not working with height set to auto

So what I am trying to do is have the leftcontent div floated to the left, the rightcontent div floated to the left and position the content div inbetween them. When I adjusted the height of the album div to an actual pixel size instead of auto it worked perfectly fine, but with the height being auto it doesn't float the divs properly.

To see what the current code is doing you can go to http://www.robhorlacher.ca/images.php to give it a look at.

HTML

    <?
    print "<div id=\"ccontainer\">";
    $execute_statement = "SELECT COUNT(*) FROM 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 * FROM 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 * FROM Images WHERE 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 is happening, because those div's are empty. A div either has to have content or a specified height to show up on a page. With that being said, I think I see what you are trying to do. Here were the settings I 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;
}