макет страницы не показывает правильный результат

Question

Я хочу создать простой шаблон для своего веб-сайта. Но он не показывает правильный выход.

Мне нужен заголовок, меню, корпус (левый nav, содержание, правый nav), нижний колонтитул.

для этого я использую следующий код, но это не показывает желаемый выход.

#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

Надеюсь, что это поможет. Пожалуйста, проверьте только что созданный Fiddle. Это то, о чем вы думаете?

Вы могли бы посмотреть один раз на следующие концепции в CSS - Positioning

Fiddle: Demo

position: inherit; 

и

float: left;