Question

This is a weird question I know but I am having a time solving it. I have an image with float: left;attribute however this stying only works if the div has more than one line. When the div has 1 line it overlaps with the image. What might be the problem?

<div style="
    overflow: hidden;
    width: 600px;
    border: 1px solid black;
    padding: 5px;
    font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size: 14px;
">
    <img src="images/monkey.jpg" style="
        margin-right: 7px;
        border: 1px solid #C0C0C0;
        padding: 5px;
        float: left;
        height: 62px;
        width: 80px;
    ">
    <div style="
        margin-top: -15px;
        margin-bottom: -15px;
        word-wrap: break-word;
    ">
        <p>
            What's your plan about short posts and such?
        </p>
    </div>
</div>

Answer 1

Here is what works on both Firefox 11 and Chrome 18:

<div style="overflow:hidden;width:600px;border:1px solid black;padding:5px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;">
    <img src="images/monkey.jpg" style="float:left;margin-right:7px;border:1px solid #C0C0C0;padding:5px;height:62px;width:80px;">
    <div style="float:left;margin-bottom:-15px;word-wrap:break-word;">
        <p>What's your plan about short posts and such?</p>
    </div>
</div>

Here is the fiddle to play with in other browsers.