title: CSS Float doesn't work? Why?
body: <p>So I am currently creating a website and I have a problem. I have this div, and in the left top corner of it I want a facebook like button, and then I want text to surround it, I know this can be fixed through the "float" property, but it just won't work, instead, the text which I want to surround the facebook like button goes under the button and there is a huge space left to the right of the button.. </p>
  
  <p>This is my code:  </p>
  
  <pre><code>&lt;p&gt;
      &lt;div class="float"&gt;
          &lt;iframe src="http://www.facebook.com/plugins/like.php?href=www.mysite.com&amp;amp;send=false&amp;amp;layout=box_count&amp;amp;width=450&amp;amp;show_faces=false&amp;amp;action=like&amp;amp;colorscheme=dark&amp;amp;font=arial&amp;amp;height=90" scrolling="no" frameborder="1" style="border:none; overflow:hidden; width:450px; height:90px;" allowTransparency="true"&gt;
          &lt;/iframe&gt;
      &lt;/div&gt; 
      test
  &lt;/p&gt;
  </code></pre>
  
  <p>The css code is </p>
  
  <pre><code>div.float{
      float:left;
  }
  </code></pre>