I was looking for a way to have multiple items in a single line header (book# section# chapter#) spread out over the full width of the page and figured out a way to do it using a html table.
It works well in everythin I could test it in (nook classic, Bluefire Reader on my iPod Touch, Calibre, the Firefox ePub Reader, ADE 1.7.2 and 1.8 preview, and Sony Reader Library). And it converts decently to mobi using Kindlegen.
Here's the html code.
Code:
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="leftgrey">BOOK #</td>
<td class="centergrey">Section #</td>
<td class="right">Chapter #</td>
</tr>
</table>
<hr />
And here's the css.
Code:
table {
margin-top : 2em;
margin-bottom : 0;
}
td {
font-family : sans-serif;
font-size : 1.5em;
width : 33%;
}
.left {
text-align : left;
}
.leftgrey { /* --- Use for greying out unchanging items --- */
text-align : left;
color : #cccccc;
}
.center {
text-align : center;
}
.centergrey { /* --- Use for greying out unchanging items --- */
text-align : center;
color : #cccccc;
}
.right {
text-align : right;
}
hr {
margin-top : 0;
border : 0;
background-color : black;
height : 3px;
}