为什么我的侧边栏被压入内容下面？

我正在尝试使用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

为什么我的侧边栏被压入内容下面？

回答

相关问题