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:
CODE:
The effect I'm trying to achieve is:
Attachment 217694
But what I'm getting is:
Attachment 217695
Any ideas?
STYLING:
Code:
.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>Attachment 217694
But what I'm getting is:
Attachment 217695
Any ideas?
