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?

[RbnJrg]

Originally Posted by ElMiko

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?

Try it in the Sigil's plugin or in Calibre Viewer to see how it looks. If there looks fine, then will look fine in all ereaders not based on RMSDK (because ADE 2.x/3.x doesn't honor pseudo-elements).

[ElMiko]

Originally Posted by RbnJrg

Try it in the Sigil's plugin or in Calibre Viewer to see how it looks. If there looks fine, then will look fine in all ereaders not based on RMSDK (because ADE 2.x/3.x doesn't honor pseudo-elements).

Ah, that's what I was looking for. ADE strikes again.... So I'm either going to have to deal with the potential vanishing text via "white-space: nowrap" or the image being erased via ADE....

For over a decade, I've been reading threads on this forum in which ADE is raked over the coals for its idiosyncratic rendering. You would think they would have listened to the community, and made some adjustments. But I guess not. Makes me think of another tech company that starts with an A, uses a fruit logo, and ends in "pple"...

EDIT: looks like pseudo-elements are only sporadically supported by epub2... boo.

[RbnJrg]

Originally Posted by ElMiko

EDIT: looks like pseudo-elements are only sporadically supported by epub2... boo.

There are epub2 ereaders that honor pseudo-elements, ie., KOReader. And all epub3 ereaders will support an epub2 with pseudo-elements. But if you want something that works everywhere, although is not optimal, you can try the following approximation, which centers the block, aligns the text to the left, and does not depend on any "a priori" width:

  <div class="bigWrapper">
    <div class="wrapper">
      <p class="col1"><img alt="" src="../Images/your_image.png"/>LOREM<br/>IPSUM DOLOR SIT AMET, CONSEC</p>
    </div>
  </div>

.bigWrapper {
  text-align: center;
}

.wrapper {
  display: inline-block;
}

.col1 {
  text-align: left;
}

.col1 img {
  display: block;
  float: left;
  width: 3em; /* This must be changed according to your image */
  height: 3em; /* This must be changed according to your image */
  margin: 0 5px 0 0;
}

As I said, it's not the best but it still works in ADE 2.0.