爲什麼我的側邊欄被壓入內容下面？

我正在嘗試使用HTML和CSS設置模板，並且遇到了側欄的問題。它似乎越來越低於我的內容，儘管它應該是左邊的。我無法弄清楚爲什麼？有沒有人有什麼建議？爲什麼我的側邊欄被壓入內容下面？

HTML：

<head> 
<title>working</title> 

<link href="style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div id="container"> 

    <div id="banner"> </div> <!-- End banner div --> 

    <div id="navcontainer">  
     <ul id="navlist"> 
      <li><a href="index.php">HOMEPAGE</a></li> 
      <li><a href="about.php">ABOUT</a></li> 
      <li><a id="current" href="index.php">HOMEPAGE</a></li> 
      <li><a href="index.php">HOMEPAGE</a></li> 
     </ul> 
    </div> <!-- End navcontainer div --> 



    <div id="content">main content 
    </div> <!-- End content div --> 


    <div id="sidebar"> sidebar content 
    </div> <!-- End sidebar div --> 



    <div id="footer"> foooter </div> <!-- End footer div --> 



</div> <!-- End container div --> 

</body>

和CSS

html, body { 
    height: 100%; /* Required */ 
    } 

body { 
    margin : 0; 
    padding : 0; 

    font : 75% "Trebuchet MS", verdana, arial, tahoma, sans-serif; 
    line-height : 1.8em; 
    color : #000000; 
    background : #F5F5FF; 
    } 

#container { 

    position: relative; 
    min-height: 100%; 
    width : 800px; 
    margin : 0 auto 0 auto; 
    border-style: solid; 
    border-width:1px; 
    background : #FFFFCC; 
    } 




#banner { 

    color : #000000; 
    border-style: solid; 
    border-width:1px; 
    height : 150px; 
    background : #fff 
    }  



#content { 
    min-height: 100%; 
    float:right 
    padding : 10px; 
    margin-left : 200px; 
    margin-bottom : 10px; 
    color : #666; 
    background : #F5EBCC; 
    border-left-style:dotted; 
    border-left-color:#8F8F00; 
    border-bottom-style:dotted; 
    border-bottom-color:#8F8F00; 
    } 



#sidebar { 

    float : left; 
    width : 20px; 

    padding : 10px; 

    color : #000000; 

    border-style: solid; 
    border-width:1px; 
    } 


#footer { 
    clear:both; 
    position:relative; 
    bottom: 0; 
    width: 800px; 
    background : #FFFFCC; 
    } 

#navcontainer { 
    background:#E0E066; 

    } 

#navlist { 
    list-style: none; /* list-style: none removes bullets */ 
    margin: 0px; 
    padding : 0.5em 0; 
    } 

#navlist li { 
    display: inline; 
    margin : 0; 
    } 

#navlist li a { 
    padding : 0.5em 0.5em; 
    margin: 0; 
    color : #000; 
    background : #B8B800; 
    text-decoration : none; 
    } 

#navlist li a:hover { 
    color : yellow; 
    background : #8F8F00 url(img/menu_arrow.gif) bottom center no-repeat; 
    } 

#navlist li a#current { 
    color : #fff; 
    background : #8F8F00 url(img/menu_arrow.gif) bottom center no-repeat; 
    }

來源

2012-10-02 user1658170

切換您的＃內容和#sidebar div標籤的HTML中的順序將解決這個作爲您正在使用反向浮動技術：http://jsfiddle.net/vrdZZ/

來源

2012-10-02 19:06:35 deizel

這樣做的伎倆，但我現在在我的內容div的底部丟失我的邊界。 – user1658170

您在#content規則中浮動後缺少一個分號。

來源

2012-10-02 19:11:50

爲什麼我的側邊欄被壓入內容下面？

回答

相關問題