내 사이드 바가 콘텐츠 아래로 푸시되는 이유는 무엇입니까?

HTML과 CSS로 템플릿을 설정하려고하는데 사이드 바에 문제가 있습니다. 그것이 있어야하는 것처럼 그것이 왼쪽이지만 그것은 내 콘텐츠 아래로 밀려 오는 것 같습니다. 나는 이유를 알 수 없다? 누구든지 어떤 제안이 있습니까?내 사이드 바가 콘텐츠 아래로 푸시되는 이유는 무엇입니까?

예 :http://jsfiddle.net/zDdfn/

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