CSS悬浮不起作用的高度设置为自动

Question

所以我想要做的就是将leftcontent div浮动到左侧，rightcontent div浮动到左侧并将内容div放置在它们之间。当我将相册div的高度调整为实际的像素大小而不是自动时，它的效果非常好，但高度为自动，它不会正确地浮动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的是空的。 A 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; 
}