Tips for CSS formatting

[paulrobertpine]

Hello,

Please see:

https://songbook.netlify.com/it-s-my-life/

Do you have any CSS tips to avoid the problem with chords that don't have lyrics under them? I'd like all the chords to line up regardless if there are words under them. See attached screenshot.

[paulrobertpine]

I can see how you might do this with CSS grid or Flexbox and making the Chords have a width of zero, but that doesn't work well where you have sections of chords only as they overlap.

[martijnversluis]

@paulrobertpine There are some solutions, using flexbox is one of them. Another, simple solution is to use:

.lyrics:after {
    content: '\200b';
}

Here is a post that mentions several solutions: https://stackoverflow.com/questions/3416454/how-to-make-an-empty-div-take-space.

Please let me know if this is helpful.

[paulrobertpine]

Thanks, it didn't work but I appreciate the tip! I'll update this once I find a good solution. If you're aware of another example of a site using the HtmlDivFormatter() markup please let me know.

[paulrobertpine]

yep, flexbox! sorry to bug you about this.