[ElMiko]

I am trying to center some left-aligned text with a floating image on the left. Unfortunately, it seems that the width of the container is defined as the width of the text BEFORE the floating image is applied, and as a result, the text automatically breaks before the last word. Now, I can get around this by using "white-space: nowrap", but doing so invites the potential for future issues.

STYLING:

.center {
        text-align: center;
        margin-left: -2.2em;
        }
.ib {
        font-size: 0.9em;
        margin-top: 5em;
        line-height: 1em;
        display: inline-block;
        text-align: left;
        }
.floatimg {
        float: left;
        height: 1.75em;
        clear: right;
        line-height: 1.15em;
        margin-top: 0.15em;
        margin-bottom: -0.25em;
        margin-right: 0.3em;
        }

CODE:

 <div class="center">
    <p class="ib"><img alt="" class="floatimg" src="../Images/00.jpg" /><b>LOREM</b><br />
    IPSUM DOLOR SIT AMET, CONSEC</p>
  </div>

The effect I'm trying to achieve is:



But what I'm getting is:


Any ideas?