Question

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&amp;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;
}

Answer 1

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.