CSS Float doesn't work? Why?

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..

This is my code:

<p>
    <div class="float">
        <iframe src="http://www.facebook.com/plugins/like.php?href=www.mysite.com&amp;send=false&amp;layout=box_count&amp;width=450&amp;show_faces=false&amp;action=like&a开发者_如何学Pythonmp;colorscheme=dark&amp;font=arial&amp;height=90" scrolling="no" frameborder="1" style="border:none; overflow:hidden; width:450px; height:90px;" allowTransparency="true">
        </iframe>
    </div> 
    test
</p>

The css code is

div.float{
    float:left;
}

---

Check this solution:

.float{
    float: left;
    width: 70px;
    height: 60px;
    overflow: hidden;
}

http://jsfiddle.net/j9QSj/

Let me know if it's what you're looking for.

---

You probably need a clear: both on the next div or span down. You can share your code with http://www.pastebin.com/.

---

The width of the iframe is 450px... you probably meant it to be 45px in the url change width=450 to width=45 that should fix your problem.

---

The css definition is wrong.

It needs to be

float:left

instead of

position:float