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.