Align text to top in columns

[Fitz Frobozz]

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?

.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]

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.

[Fitz Frobozz]

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:

[RbnJrg]

Originally Posted by Fitz Frobozz

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:

Ok, that is easy and you don't need to employ a flex-box. Here you have an aproximation that works on both, epub and KFX:

1. In your .xhtml file:

  <div class="left">
    <p>Lorem Ipsum</p>

    <p>Lorem Ipsum</p>
  </div>

  <div class="right">
    <p>Lorem Ipsum</p>
  </div>

2. In your .css file:

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

Use the above code and your epub will be compatible with epub2/3 ereaders and also with Kindle. An alternative could be to employ two divs with the property "display: inline-block"; something like the following:

1. The same for .xhtml file
2. In you .css file:

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

But for this case, I prefer to employ the solution based on the property "float".

[Fitz Frobozz]

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.

[Fitz Frobozz]

Option #3 did the trick. Seems there may be quirks/issues that disrupt vertical alignment for elements that are inside floated elements (or are floated themselves, as I was seeing the other day). In any case, thanks for taking the time and being so helpful!

This is what I ended up with, which aligns left- and right-hand columns to the left and to the right, and both columns to the top:

  <div class="top-outer-left">
    <div class="top-inner-left">
      Lorem ipsum: <em>dolor sit amet</em><br/>

      Ut enim ad minim veniam: 1234
    </div>
  </div>

  <div class="top-outer-right">
    <div class="top-inner-right">
      Duis aute irure dolor: 5678 (Excepteur sint occaecat)
    </div>
  </div>

.top-outer-left, .top-outer-right {
  width: 49%;
  display: inline-block;
  vertical-align: top;
  font-size:.85em;
}

.top-outer-left {
  text-align:left;
}

.top-outer-right { 
  text-align:right;
}

.top-inner-left, .top-inner-right {
  margin: 0;
}

[RbnJrg]

Thanks for taking the time and being so helpful!

No problem and glad that you were able to fix your issue by mean of the inlined blocks method.

And may be the solution based on floating blocks didn't work because of the witdh of the divs. I think that with a width of 49% instead of 49.75% could work (maybe you are using some margins that make a width of 49.75% too large).

[rjwse@aol.com]

Great explanation! I have been long wondering why dedicated ebook readers have been slow to incorporate flex and grid. Is it a low-power hardware issue? Even smart phones on android can with good ebook reader apps can do more than kindle or nook.