Inline-block and float interaction

[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?

[RbnJrg]

What you need to do is employ two divs, or one <div> and a <p>: the first div with the property "text-align: center"; the second div (or p) with the properties "display: inline-block" and "text-align: left". Something like:

<div class="centerLeft">
    <p class="inlineLeft">LOREM<br/>IPSUM DOLOR SIT AMET, CONSEC</p>
</div>

.centerLeft {
  text-align: center;
}

.inlineLeft {
  display: inline-block;
  text-align: left;
}

Of course, you can add the property "font-weight: bold" inside the .inlineLeft class if you wish and reduce the width (by default is 100%). Regarding how to add the symbol at the left, maybe the easiest way is to employ the pseudo-element ::before; something like:

.centerLeft::before {
  content: "©";
  font-size: 2.4em; /* This size has to be linked with the line-height */
}

If you want to employ a line-height of 1.5em, then the full code would be:

.centerLeft {
  text-align: center;
}

.inlineLeft {
  display: inline-block;
  font-weight: bold;
  text-align: left;
  line-height: 1.5em;
}

.centerLeft::before {
  content: "©"; /* here, instead of the symbol, you need to write the url of your image */
  font-size: 3em;
}

Here is the output:

[Turtle91]

You could also try this:

CSS:
    .pub      {clear:both; margin:2em auto; width:50vw} /* or 50% */
    .pub img  {float:left; width:2em; 
               padding:0 .5em 0 0; vertical-align: text-top;}
    .pub div  {font-weight:bold; margin-left:2.5em; 
               text-indent:0; text-align:left; 
               font-variant:small-caps}
    .pub span {display:block; font-weight:normal}

HTML:
<div class="pub">
  <img alt="" src="../Images/d20.svg"/>
  <div>Lorem <span>ipsum dolor sit amet, consect</span></div>
</div>

[ElMiko]

Thanks, guys.

couple of clarifying questions:

@RbnJrg: So this looks basically like what I had, except the trick is using the "before" pseudo-element instead of a float. And because I'm completely ignorant of pseudo-elements, I'm not too angry at myself for missing this solution. I guess I'm going to have to read up on pseudoelements, now! Unfortunately, in the continuing spirit of that ignorance, I can't for the life of me figure out how to swap the content symbol for an image... All I get is either nothing or the text of the filepath! What am I doing wrong?

EDIT1: P.S. — oh man... these pseudo-elements are really going be the end of me... So much potential for OCD formatting tweaks...
PPS: Nevermind, i finally got it! content: url(filepath)... Unfortunately, now I can't figure out how to define the image height.... The pseudo element image doesn't seem to respond to height values...

EDIT2: Okay, so this is what I got after some digging:

.centerLeft::before {
    background-image: url(../Images/00.jpg);
    background-size: 2em auto;
    display: inline-block;
    width: 2em; 
    height: 2em;
    content:"";
	}

This appears to work, but i don't know if this is so juryrigged that it will actually fail in a real ebook display? Is this too duct-taped-together, or would it work?

@Turtle91: When I first reproduced the code, this is what I got:


With a little poking, I figured out that it was the container width that was causing the 2nd line to break, which i changed to 60%. However, no matter how you slice it, the text isn't actually automatically centering in the page. So for example, if i expand the window (keeping your original 50vw) you'll see:



Is having to set the viewport width relative to the physical width of the viewing window just an unavoidable feature of this solution, or is there a way to make it automatically center for any length of text?