Well, what a lovely way to spend a Sunday morning.
Tables, as suggested by Hitch, or display:table (row, cell) as suggested by RbnJrg, do not work in my case. As soon as one of the images in a row is set to be a slightly more than 50% of the column width, bang, up it blows to 100% width, and the other one is squashed like a bean stalk and, listen to this, shoved into the margin beside the table (if you ever need to position something in the margin, you now know how it's done).
Did some more media query hunting and came across some really weird ones. Not having a Voyage I'm not sure if they work on the actual device, but in both the previewers they give me hope. And a little wonderment. Some of the queries try to isolate the Voyage by resulution. The DX in Previewer 2.9 reports two different Voyage/Oasis resolutions on the same page (1448 by 1072 and 1440 by 1080) and believes that one Fire query applies to it as well. If I select Voyage in the PV 2.9, it too has two different resolutions (same pixel count as before).
And the three Fires in PV2.9 also believe to have both Voyage resolutions. The Previewer 3.29.1 reports the same values as PV 2.9 does for the tree Fires. Same goes when I open the mobi in Kindle 4 PC.
My own Fire thinks it's a kf8, not a mobi, and selects the "fireall" query from github without also claiming to have one or both of the Voyage resolutions. That what gives me a little hope the Voyace can be isolated.
Hitch, if you find the time during the week to load this onto your Voyage, I'd be both grateful and interested to see, how it responds to the @media queries. I'll probably have to either get my own Voyage, or convince the Powers that Be that I won't live long enough for this issue to be ever fixed.
Klaus
PS: I add the @mediaqueries used in the demo book here because the way I create my books the CSS is packed so tightly you need a screen that's one line tall and gazillions of columns wide.
Code:
p.mobi,p.kf8,p.notmobi,p.notkf8,p.vdevdim1,p.vdevdim2,p.vdim1,p.vdim2,p.fireall,p.einkall,p.pwhitesall,p.voyoasis1,p.voyoasis2 {display:none;}
@media amzn-mobi {
p.mobi{display:block;}
}
@media amzn-kf8 {
p.kf8{display:block;}
}
@media not amzn-mobi {
p.notmobi{display:block;}
}
@media not amzn-kf8 {
p.notkf8{display:block;}
}
@media amzn-kf8 and (device-height: 1448px) and (device-width: 1072px),
amzn-kf8 and (device-height: 1072px) and (device-width: 1448px) {
p.vdevdim1{display:block;}
}
@media amzn-kf8 and (device-height: 1440px) and (device-width: 1080px),
amzn-kf8 and (device-height: 1080px) and (device-width: 1440px) {
p.vdevdim2{display:block;}
}
@media amzn-kf8 and (height: 1448px) and (width: 1072px),
amzn-kf8 and (height: 1072px) and (width: 1448px) {
p.vdim1{display:block;}
}
@media amzn-kf8 and (height: 1440px) and (width: 1080px),
amzn-kf8 and (height: 1080px) and (width: 1440px) {
p.vdim2{display:block;}
}
/* see https://gist.github.com/dvschultz/8324974 */
@media screen and (device-aspect-ratio:1/1) {
/* "anything in here will work on Fires. Seriously." see github url above */
p.fireall{display:block;}
}
@media not all and (device-aspect-ratio:1/1) {
/* "anything in here will work on e-inks" see github url above */
p.einkall{display:block;}
}
@media amzn-kf8 and (device-height: 1024px) and (device-width: 758px),
amzn-kf8 and (device-height: 758px) and (device-width: 1024px),
amzn-kf8 and (device-height: 800px) and (device-width: 600px),
amzn-kf8 and (device-height: 600px) and (device-width: 800px),
amzn-kf8 and (device-height: 1448px) and (device-width: 1072px),
amzn-kf8 and (device-height: 1072px) and (device-width: 1448px) {
p.pwhitesall{display:block;}
}
@media not all and (device-aspect-ratio:1/1) and (device-height: 1448px) and (device-width: 1072px),
not all and (device-aspect-ratio:1/1) and (device-height: 1072px) and (device-width: 1448px) {
p.voyoasis1{display:block;}
}
@media not all and (device-aspect-ratio:1/1) and (device-height: 1440px) and (device-width: 1080px),
not all and (device-aspect-ratio:1/1) and (device-height: 1080px) and (device-width: 1440px) {
p.voyoasis2{display:block;}
}