For those interested, taking Eric's suggestion at just having two columns of images, here's the initial CSS I'm going with. I'm posting the whole CSS.
== All Images Same Size pdf CSS ==
Obviously just for inspiration, your mileage may vary.
* all images same size
* re-aligned bullets with now smaller 'large' image
* optimized borders so that they never align next to each other - which looks ugly in pdf
* centered logo, and give it some breathing space
* aligned summary with introduction
* everything is big. small paper margins.
[image|131035]
[code]
/* IMAGES - LAYOUT
==================== */
ul.stepImages {
width: 812px !important;
}
li.stepImage {
margin-right: -4px;
margin-top: -4px;
}
.stepImage img, .step img.large {
padding: 0px;
}
/* resize large images */
.step img.large {
width: 388px;
height: 291px;
}
.stepText.rightText {
width: 360px;
margin-top: -290px;
margin-left: 410px;
}
/* resize medium and standard images : */
.stepImages.standard img, .stepImages.medium img {
width: 388px;
}
/* standard images only one pixel in between, border alignment/overlap looks bad in pdf */
.stepImages.standard .stepImage.first img {
border-width: 1px 0px 1px 1px;
}
.stepImages.standard .stepImage.last img {
border-width: 0px 1px 1px 1px;
}
/* medium images only one pixel in between, border alignment/overlap looks bad in pdf */
.stepImages.medium .stepImage.first img {
border-width: 1px 0px 1px 1px;
}
.stepImages.medium .stepImage.last img {
border-width: 1px 1px 1px 1px;
}
/* OTHER STUFF
================= */
.logo {
margin-left: 0px;
}
.logo img {
margin-top: 15px;
}
.title .summary {
margin: 8px 30px 16px 30px;
}
.introText {
margin: 40px 30px 0 30px;
}
p {
font-size: 12pt;
}
.stepImages .noImage {
display: none;
}
.author {
display: none;
}
h3.stepTitle {
background: #f5f5f5;
}
.introText {
page-break-inside: avoid;
page-break-after: avoid;
}
[/code]