Align text to top in columns

Fitz Frobozz · Today, 02:44 PM

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;
}

Would prefer to stick with a solution like this one if possible, but I'm open to alternatives, especially if something suggested has wider reader support.

Edit: Just noticed that this relevant to this thread. Not seeing any clear solutions there, however.

RbnJrg · Today, 04:49 PM

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.

Today, 02:44 PM	#1
Fitz Frobozz Member Posts: 18 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; } Would prefer to stick with a solution like this one if possible, but I'm open to alternatives, especially if something suggested has wider reader support. Edit: Just noticed that this relevant to this thread. Not seeing any clear solutions there, however. Last edited by Fitz Frobozz; Today at 02:49 PM.

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

Today, 04:49 PM	#2
RbnJrg Wizard Posts: 1,594 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