title: Float not working. Why?
body: <p>this is really annoying me, i've tried looking up a solution but to no avail. 
  In the header of <a href="http://otherwords.info" rel="nofollow">My Website</a>, You can see the search bar is underneath the logo, I just want it on the far right of the header. It seems like such a simple fix but I can't work it out for the life of me.</p>
  
  <p>Here's the HTML</p>
  
  <pre><code>&lt;div id="header"&gt;
  &lt;div id="logo"&gt;
  &lt;a href="http://www.otherwords.info/index.php"&gt;&lt;img src="images/otherwordslogo.jpg" /&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;div id="search"&gt;
  &lt;span&gt;
  &lt;form method="post" action="search.php?op=Search" id="form"&gt;
  
  &lt;input type="text" value="Search Phrase" onfocus="if(this.value == 'Search Phrase'){this.value = '';}" size="40" name="q"&gt;
  
  &lt;input type="submit" value="Search" name="submit"&gt;
  
  &lt;/form&gt;
  &lt;/span&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's the CSS</p>
  
  <pre><code>#search { float:left;}
  
  #logo { float:left; }
  
  
  div#header {
      vertical-align:top;
      width:100%
      clear: both;
      height: 150px;
      background-color: aqua;
      padding: 1px;
  
  
  }
  </code></pre>