CSS плавающий не работает с высотой, установленной на авто

Question

Так что я пытаюсь сделать так, чтобы левый div содержимого поплыл влево, правый div попал влево и поместил контент div между ними.Когда я отрегулировал высоту div альбома для фактического размера в пикселях вместо auto, он работал отлично, но с высотой auto он не перемещает div правильно.

Чтобы увидеть, что представляет собой текущий кодВ этом случае вы можете перейти на http://www.robhorlacher.ca/images.php, чтобы посмотреть.

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;
}

Answer 1

Это происходит, потому что эти div пусты.div должен иметь содержимое или указанную высоту, чтобы отображаться на странице.С учетом сказанного, я думаю, что вижу, что вы пытаетесь сделать.Вот настройки, которые я изменил:

#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;
}