[RbnJrg]

Originally Posted by valyria

What is the best way to incorporate sidebars in Mobi books?

Hi valyria;

As Hitch told previously, if you plan to build your book for mobi7 (old book type of Kindle) then you can't have sidebars because mobi7 doesn't support the property "float" (nor many other properties ). So when you build a book for Kindle, you have to have a code for mobi8 (the modern type of books) and a code for mobi7 (the old type of books). I could find something that is readible for mobi7 and also allows sidebars in mobi8. The code is the following:

@media amzn-kf8 { /* this code only applies for mobi8 books*/

hr.m7 {
  display: none; /* horizontal lines are hidden under mobi8 */
}

div#sidebar {
 float: left;
 width: 50%;
 font-size: 120%;
 text-indent: 0em;
 text-align: justify;
 margin: 1em 1em 1em 1ex;
 padding: 1em 1em 1em 1ex;;
 border-top: 6px solid black;
 border-bottom: 6px solid black;
}

.fl {
 display: table-cell;
 width: 0.3em;
 font-size: 8em;
 line-height: 80%;
 color: rgb(192, 192, 192);
}

.tf {
 display: table-cell;
 vertical-align: bottom;
 padding-left: 0.5em;
}
}

@media amzn-mobi {  /* this code only applies for mobi7 books*/
hr.m7 {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
 }

div#sidebar {
 text-align: center;
}

.fl {
 display: none; /* this class is hidden under mobi7 */
}

.tf {
 font-size: 1.2em;
 font-weight: bold;
 margin-left: 20%;
}
}

and in the .html page:

<hr class="m7" />

<div id="sidebar">
    <div class="fl">
      “
    </div>

    <div class="tf">
    ...sometext...
    </div>
</div>

<hr class="m7" />

Below you can see a screenshot about how the book looks in mobi8 and in mobi7.

Regards
Rubén