title: How to correctly float lists
body: <p>I'm having a hard time with floats. I am trying to float the list on the header and footer to the right and keep the image on the left. </p>
  
  <p><a href="http://jsfiddle.net/spadez/KYdnJ/21/" rel="nofollow">http://jsfiddle.net/spadez/KYdnJ/21/</a></p>
  
  <p>When I add in the floats the layout goes all screwy. This is the CSS which is relevant:</p>
  
  <pre><code>#header {
      line-height: 50px;
      background-color: #F2F2F2;
      border-bottom: solid 1px #E8E8E8;
      padding: 0px 20px 0px 20px;
  }
  #header li { 
      font-family: arial, sans-serif; 
      background-color: #D3D3D3; 
      display: inline-block; 
      font-weight: bold; 
      line-height: 28px; 
      padding: 0px 9px 0px 9px; 
      font-size: 12px;
      float: right;
  }
  #header img {
      height: 40px;
      float: left;
  }
  </code></pre>
  
  <p>Can anyone tell me where I am going wrong please?</p>