[Hitch]

Hi, Gang:

I'm hoping that Ducky or one of the other CSS wonks/wonkettes will help me out here.

I usually do "other books by this author" pages in my epubs as a feature with embedded links to webpages, Amazon pages, what-have-you. Normally, this works fine with a blurb and some css float for the images (book cover thumbs). However, I'm doing a kid's book, and the author has 90-some-odd "other books." I'm accustomed to not using tables as Kindle doesn't support them (and I produce both epub and mobis for my clients' use). I use KindleGen to convert the epubs I create in Sigil (sorta) into mobis. Okay, enough background.

In creating this page, I've just been using header tags for the category names (Flip Books, Board books, whatever) and then within p tags, floating the image left and putting the book title textually immediately after the image. This isn't working worth a crap. It looks fine in EPubReader, but on an iPad it renders in a dreaded left-to-right stairstep stagger. I presume I could fix this by wrapping (eeek!) div tags around each book listing, but I was wondering if there was a better way? It looks a bit funky as it is, because each thumb isn't precisely the same size as all the others (author-provided, please don't beat me), so the text isn't all precisely in the same place, if you see what I mean. Given that the epubs will be viewed on various devices, I'm leery of absolute positioning (but willing to learn if I'm wrong about it).

@Ducky, anybody: any suggestions as to how I could best format this, using CSS that hasn't been deprecated, to look halfway decent and NOT stair-step down? I can't pop the code in as I'm on my laptop at the moment, but my guy with the iPad sent me some screenshots and it ain't pretty. If the guy had a suitable webpage, I'd just screenshoot the thing, put it in as an image and call it a day, but he doesn't.

Thoughts? TIA,

Hitch