vertical-align/display table

nu9j6e · 01-26-2015, 08:15 AM

I've been playing with this HTML and CSS, using display:table and some vertical-align.
My goal is to resize everything according to the window height and to have the last line always at the bottom of the page.

It works in ADE 3 and Mantano Reader (Nexus 7).
The last < div class="editor" > remains at the bottom when I resize the window, and even when I increase/decrease font size in ADE.

But I worry because it doesn't work in calibre viewer.
So maybe it will not work at all in some readers ?
Are there any caveats I should be aware of ?

Thanks for any feedback

Code:

<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">

<head>
  <title>test 1</title>
  <style type="text/css">
  @page {
    margin: 0;
    }
  html, body  {
    height: 98%;
  }
  body, h1, p {
    margin: 0;
  }
  .pagetitle p, .pagetitle h1 {
    display: table-cell;
    text-align: center;
    text-indent: 0;
  }
  .author, .title, .subtitle, .editor {
    display: table;
    width: 100%;
  }
  .author p {
    vertical-align: middle;
    font-size: 1.3em;
    min-height: 21%;
  }
  h1 {
    vertical-align: middle;
    min-height: 21%;
    font-size: 1.85em;
  }
  .subtitle p {
    vertical-align: top;
    min-height: 21%;
  }
  .editor p {
    vertical-align: bottom;
    font-size: 0.9em;
    min-height: 35%;
  }
  </style>
</head>
<!--
////////////////////////
-->
<body class="pagetitle">

  <div class="author">
    <p>Author</p>
  </div>

  <div class="title">
    <h1>Lorem ipsum<br/>venia minim</h1>
  </div>

  <div class="subtitle">
    <p>Lorem ipsum</p>
  </div>

  <div class="editor">
    <p>Dignissim qui blandit</p>
  </div>

</body>

</html>

Jellby · 01-26-2015, 09:03 AM

Quote:

Originally Posted by nu9j6e

But I worry because it doesn't work in calibre viewer.

Because there's no portable way of accessing the window height ("html, body {height: 98%}" is not guaranteed to work).

GMcG · 01-27-2015, 03:20 PM

This seems to work (Calibre, Sigil, ADE):

Instead of

.author, .title, .subtitle, .editor {
display: table;
width: 100%;
}

use

.author {
display: table;
width: 100%;
height: 21%
}
.title {
display: table;
width: 100%;
height: 21%
}
.subtitle {
display: table;
width: 100%;
height: 21%
}
.editor {
display: table;
width: 100%;
height: 35%
}

You can delete the height in the paragraphs but you still need

html, body {
height: 98%;
}

George

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Display problem - white vertical line	pepak	Sony Reader	6	12-22-2013 11:30 AM
Table display in KF8	ElMiko	Kindle Formats	1	11-16-2012 03:27 AM
Help with vertical alignment, table cell content	meadowlarkOR	ePub	1	01-01-2012 07:46 AM
need help on how to align a table to the right	NASCARaddicted	ePub	6	02-18-2011 01:46 PM
unwanted table-change (vertical align) by calibre	NASCARaddicted	Calibre	2	01-27-2010 03:35 AM

01-27-2015, 03:20 PM	#3
GMcG Writer Posts: 101 Karma: 590630 Join Date: Mar 2011 Location: Munich, Germany Device: none	This seems to work (Calibre, Sigil, ADE): Instead of .author, .title, .subtitle, .editor { display: table; width: 100%; } use .author { display: table; width: 100%; height: 21% } .title { display: table; width: 100%; height: 21% } .subtitle { display: table; width: 100%; height: 21% } .editor { display: table; width: 100%; height: 35% } You can delete the height in the paragraphs but you still need html, body { height: 98%; } George

Advert