The latest desperation of many renditions uses flexbox css against (old) html tables.
Here is the css code. (Note that the print stylesheet is separate because the @print element did not work for me in Chrome)
Code: Select all
<style type="text/css">
td {
width: 45%;
margin: 1%;
}
td img {
display: block;
width: 100%;
}
ul {
height: 5.25in;
padding: 15%;
flex-direction: column;
}
li {
text-align: center;
list-style: none;
}
.facts {
width: 70%;
}
tr, ul {
display: flex;
justify-content: space-around;
}
</style>
<style type="text/css" media="print">
.table-page {
page-break-after: always;
}
</style>
Code: Select all
<table class="table-page">
<tr>
<td><img src="albatross.png" alt="Albatross"></td>
<td><img src="beaver.png" alt="Beaver"></td>
</tr>
<tr>
<td><img src="blackbear.png" alt="Black Bear"></td> <td><img src="cat.png" alt="Cat"></td>
</tr>
</table>
<table class="table-page">
<tr>
<td class="facts">
<ul>
<li>Known as "Busiest Animal" that is constantly changing its habitat.</li><li>Lives in lodges made of branches and mud.</li><li>It's the largest rodent.</li> </ul>
</td>
<td class="facts">
<ul>
<li>The largest of flying birds with a wingspan of up to 12 feet.</li><li>Swoops over the water then dives in to catch its prey.</li><li>Eats squid, octopus and other fish.</li> </ul>
</td>
</tr>
<tr>
<td class="facts">
<ul>
<li>Sleeps 13 to 14 hours a day.</li><li>Heaviest on record weighed 50 pounds.</li><li>Has powerful night vision.</li> </ul>
</td>
<td class="facts">
<ul>
<li>Excellent tree climber.</li><li>Eats all summer to hibernate in the winter.</li><li>Loves honey.</li> </ul>
</td>
</tr>
</table>
<table class="table-page">
<tr>
<td><img src="cheetah.png" alt="Cheetah"></td>
<td><img src="bookcover.png" alt="bookcover"></td>
</tr> ...
BTW I prefer the extra space at the top of the page.