页面布局没有显示正确的结果

Question

我想为我的网站创建一个简单的模板。但它没有显示正确的输出。

我想标题，菜单栏，正文（左导航，内容，右导航），页脚。

因为我使用下面的代码，但是这不显示所需的输出。

#left-side { 
    position: relative; 
    width:150px; 
    top: 0px; 
    left:0px; 
    background-color: #FF6666; 
} 
#right-side { 
    width:150px; 
    position: relative; 
    top: 0px; 
    background-color: #00FF66; 
    float: right; 
} 
#container{ 
    width: 950px; 
    margin: 0 0 0 150px; 
    padding: 0; 

} 
#header { 
    position: relative; 
    width:100%; 
    height:100px; 
    top: 0px; 
    background-color:#9eb9c2 ; 
} 
#menu-bar{ 
    width:100%; 
    height: 20px; 
    color :red; 
} 
#middle{ 
    position: relative; 
    width:100%; 
    min-height:100px; 
    top: 0px; 
    background-color: #555555; 
} 
#footer { 
    position: relative; 
    height: 60px; 
    width: 100%; 
    clear: both; 
    background-color: blue; 
} 

在HTML

<div id="container"> 
     <div id="header"> 
     </div> 
     <div id="menu-bar"> 
     </div>   

     <div id="middle">  
      <div id="left-side"> 
       <h3>side1</h3>  
       <ul>  
        <li>Let me say hello</li>  
       </ul>  
      </div> 

      <div id="middle-content">  
       <h2>main content</h2>  
       <p>Hwllo</p>  
      </div> 

      <div id="right-side">  
       <h3>side2</h3>  
       <ul>  
        <li>Hiii</li>  
       </ul>  
      </div>  
     </div> 

     <div id="footer">  
      <h3>footer</h3>  
     </div> 
    </div> 

Plase看看如何将一个适当的布局。

Answer 1

希望这会有所帮助。请检查我刚刚创建的小提琴。这是你在想什么吗？

您可能需要在CSS以下概念看一次 - Positioning

Fiddle: Demo

position: inherit; 

和

float: left;