Yesterday, 02:44 PM | #1 |
Member
Posts: 20
Karma: 10
Join Date: May 2024
Device: Kindle Scribe
|
Align text to top in columns
I'm struggling with CSS issue involving a parent div and a couple of child divs that I want aligned to the top. The document is ePub 3 and when done I intend to create an ePub 2 version for more device compatibility.
The CSS seems fine and both Caliber and Sigil render the content as expected (both container and children all align to top of page), but on my Kindle Scribe (and presumably on other Kindle readers) the second of the two child divs aligns to the bottom of the parent container instead. Here's the CSS (the first applies to the parent container, the second to the child divs). Any suggestions? Code:
.content-top { display: flex; grid-template-columns: 1fr 1fr; align-content: flex-start; vertical-align: top; font-size:.85em; } .float-container { align-content: flex-start; align-self:start; vertical-align: top; } Edit: Just noticed that this relevant to this thread. Not seeing any clear solutions there, however. Last edited by Fitz Frobozz; Yesterday at 02:49 PM. |
Yesterday, 04:49 PM | #2 |
Wizard
Posts: 1,595
Karma: 7999999
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Kindle doesn't honor the property "display: flex", so you can't use it in a .KFX ebook. And this other property you are employing "grid-template-columns" is for "grid layouts"; you can't use it with "display: flex" but with "display: grid".
Regarding a solution for your issue (it seems that you are looking for something that also works on Kindle), can you post an image of the desired output? Post that and I will be able to help you more. |
Advert | |
|
Yesterday, 07:26 PM | #3 |
Member
Posts: 20
Karma: 10
Join Date: May 2024
Device: Kindle Scribe
|
That makes sense and I had a feeling that would be what's going on here. I'd planned on starting with what I'd do normally and then tweak/revamp as required, but then I realized that I'm not very clear on what is and isn't supported on various devices.
Anyway, here's an illustration of what I am looking for and what gets rendered on the Scribe: |
Yesterday, 09:40 PM | #4 | |
Wizard
Posts: 1,595
Karma: 7999999
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
1. In your .xhtml file: Code:
<div class="left"> <p>Lorem Ipsum</p> <p>Lorem Ipsum</p> </div> <div class="right"> <p>Lorem Ipsum</p> </div> Code:
p { margin: 0; /* or whatever you want */ line-height: 1.2em; /* or whatever you want */ text-align: left; /* or whatever you want */ } .left { float: left; width: 49.75%; } .right { float: right; width: 49.75%; } 1. The same for .xhtml file 2. In you .css file: Code:
p { margin: 0; line-height: 1.2em; text-align: left; } .left { display: inline-block; width: 49%; /* Here you have to employ a smaller width; before you had 49.75% */ vertical-align: top; } .right { display: inline-block; width: 49%; /* Here you have to employ a smaller width */ vertical-align: top; } Last edited by RbnJrg; Yesterday at 09:53 PM. |
|
Today, 01:45 AM | #5 |
Member
Posts: 20
Karma: 10
Join Date: May 2024
Device: Kindle Scribe
|
That's helpful, thanks a bunch. Dunno why the float property was giving me trouble when I was trying to use it for this (just before deciding to experiment with grid and flex), but it sounds like it should have been fine. I'll give it another go and report back.
|
Advert | |
|
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
text-align-last | degn | Recipes | 1 | 03-01-2019 04:14 PM |
Kobo Touch Extended: vertical-align:top | Francois_C | Plugins | 5 | 09-04-2015 12:57 PM |
text-align:lol; | odedta | ePub | 6 | 06-16-2014 09:40 AM |
Cover Align Top | esoteric | Conversion | 0 | 02-20-2013 12:19 PM |
I can not align the text...help please! XD | derfel_spain | ePub | 17 | 12-18-2010 09:45 AM |