Floats layered on top of floats

[GrannyGrump]

Is it possible to do this?

I have an image for a chapter head, and it uses a float left to wrap the text beside it. Is there any way to place a drop cap within that wrapped text?

When I use the usual drop-cap code -- a span which is styled in the CSS -- the letter simply disappears.

Maybe I'm wishing for the moon...

[Jellby]

Disappearing is not an effect I would expect. Maybe you can show your code.

It should be possible to have the drop cap next to the chapter head image, by using two floats (see http://css-tricks.com/all-about-floats/). Or, if you want the drop cap to apear in the same area as the image, you could get that by using relative positioning or altering the elements' size.

[GrannyGrump]

well, now, don't I feel foolish!

Sigil makes my drop-cap invisible, also Calibre reader. There is just a blank square where it should show.

I just learned that ADE for desktop shows it.
I don't have my Sony reader with me, so can't check there, and I'm at work with no access to Sony Reader or any other pc reader apps.

So maybe it is a QT-webkit thing. I have got so used to Sigil always displaying valid formatting, so I don't know if this styling is on shaky ground.

The CSS for the image float is borrowed from your Tom Sawyer, the code for the drop-cap is pretty standard.

/* IMAGE FLOAT */
div.chapterhead img {
  width: 100%;
  max-width: 600px;
}
div.chapterhead div {
  text-align: left;
  margin: 0 3px 0 0;
}
div.chapterhead div.picture {
  width: 100%;
  max-width: 600px;
  height: 4em;
  margin: 0 0 -3em 0; 
  overflow: visible;
  text-indent: 0;
}
div.picture {text-indent: 0;}
div.chapterhead div.top,
div.chapterhead div.bottom {
  /* hide as much as possible */
  position: relative;
  z-index: -1;
  visibility: hidden;
  opacity: 0;
}
div.chapterhead div.top {
  float: none;
  width: 100%;
  margin-bottom: -1em;
}
div.chapterhead div.bottom {
  float: left;
  clear: both;
}
div#pt1ch01 div.bottom {
	width: 16.66%; /*100*/
max-width: 100px;
}

/* DROP CAP*/

.capLetter{
font-family: serif;
font-style: normal;
font-weight: bold;
font-size: 450%;
height: .9em;
float: left;
margin: -.15em 0.15em -.2em 0em;
}
span.leadmid {
margin-left: -.65em;
}


/*THE HTML */


<h4 class="disp0" id="p1c1">1. Burzee</h4>

<div class="chapterhead" id="pt1ch01">
<div class="picture">
<p class="ind0"><img alt="CHAPTER FIRST. Burzee" src="../Images/pt1ch01-a.jpg" /></p>
</div>a

<div class="top"><img alt="" src="../Images/auxt-ch01.png" /></div>

<div class="bottom"><img alt="" src="../Images/auxb-ch01.png" /></div>

</div>


<p><span class="capLetter">H</span><span class="leadmid">A</span>VE you heard of the great Forest of Burzee? Nurse used to sing of it when I was a child.</p>

[dgatwood]

I was noticing last week that the versions of QTWebKit that still supported QT 4.8 had a fair number of bugs where floating content is concerned. Current TOT QTWebKit as of last week was much closer to CSS spec compliance. Presumably, when Sigil adopts QT5 (released last week), a lot of those rendering problems will go away.

[mrmikel]

From the QT5 website:
In March 2011, Digia Plc. purchased the licensing and support rights of Qt from Nokia to better serve commercial desktop and embedded companies and developers. In September 2012 Digia acquired the full Qt business from Nokia. Digia is the only software house that can offer a one-stop shop for Qt development including licensing, support, training and services.

Digia, Qt works with the Qt Project and the Qt Community to ensure contributions and feedback to the rest of the Qt community.

Guess we can't complain about Nokia any more.