title: Div in HTML not floating left with CSS
body: <p>My div with class name 'header-body-right' doesn't seem to be floating to the left of my div named 'header-body-centre' and I can't understand why, here is my HTML,</p>
  
  <pre><code>    &lt;!DOCTYPE HTML&gt;
  &lt;HTML&gt;
   &lt;HEAD&gt;
    &lt;TITLE&gt;  &lt;/TITLE&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;link href="main.css" rel="stylesheet" type="text/css"&gt;
    &lt;META NAME="Generator"    CONTENT="Notepad"&gt;
    &lt;META NAME="Author"       CONTENT="00"&gt;
    &lt;META NAME="KEYWORDS"     CONTENT="" /&gt;
    &lt;META NAME="DESCRIPTION"  CONTENT="" /&gt;
   &lt;/HEAD&gt;
  
   &lt;BODY&gt;
  
      &lt;div class="header-top"&gt;
  
      &lt;/div&gt;
  
      &lt;div class="header-body"&gt;
  
          &lt;div class="header-body-centre"&gt;
              &lt;div class="logo"&gt;
              &lt;img src="logo.png" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="header-body-right"&gt;
              test
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  
  
      &lt;div class="navbar"&gt;
  
      &lt;/div&gt;
  
      &lt;div class="content-container"&gt;
  
      &lt;/div&gt;
   &lt;/BODY&gt;
  
  &lt;/HTML&gt;
  </code></pre>
  
  <p>The CSS I am using for the code is posted below,</p>
  
  <pre><code> body
  {   
      margin:0px;
      padding:0px;
  }
  
  .header-top
  {
      height:11px;
      width:100%;
      background-image: url('HeaderTopNav.png');
      background-repeat: repeat-x;
  }
  .header-body
  {
      width:100%;
      height:100px;
  }
  .header-body-centre
  {
      margin: 0 auto;
      height:100%;
      width:70%;
  }
  
  .header-body-right
  {
      width:15%;
      height:100px;
          float:left;
  
  }
  
  .navbar
  {
      height:35px;
      width:auto;
      border: 1px solid green;
  }
  .logo
  {
      margin-top:35px;
      float:left;
  }
  
  .quickNav
  {
      float:right;
  
  }
  
  .container
  {
      margin: 0 auto;
      background-color: #fff;
      border: 2px solid #c9c8c8;
      border-bottom: none;
      height:auto;
      overflow:hidden;
      width: 1000px;
      clear:both;
   }
  </code></pre>
  
  <p>Can anyone see why? I have tried floating the header-bosy-centre and decreasing the width of the header-body-right but nothing works. Can anyone see what I have done wrong? I am out of ideas. Thanks.</p>