How do I fix this CSS alignment issue?

I have a CSS alignment issue. I don’t know how to fix this myself. Either my CSS skills are getting rusty, or CSS is still rusty itself. Your help would be very much appreciated. Let me try to describe my problem.

On the homepage of my series of podcasts I show a list, with in each list item a name with a job title. The job title and the name align to each others’ left, while together they align to the right of the viewport. As you can see in this screenshot:

A screenshot of two items with different content aligning slightly differently

But there’s an issue with long names on small screens. On wide screens it looks like this:

A screensshot of alignment that looks fine

Which is fine. But on a slightly smaller screen it looks like this screenshot:

A screenshot of things not looking fine

Which is not fine. I want it to look like this next example:

A screenshot of how it should look

Or, when the job title is wider it should look like this next example, of course:

An example of how it should align with a wider job description

I’ve tried, and I’ve failed. Please help!

Comments

  1. Doesn’t seem possible. The gist of your request is to shrink the H2 element when its contents wrap into a new line and there is new whitespace on the right. Consider filing an issue on CSSWG’s GitHub repo to get some input from the editors.

  2. Please disregard my tweets, here is a better solution:

    The name of the person needs to be set to block or inline block with a float to the right.

    Then you have to detect whether the person’s role is wider than the block. If it is the block containing the name of the person needs to have a right margin that is equal to the initial block width + the extra width.

    • Vasilis
    • #

    Turns out that this layout issue doesn’t prove anything about the rustiness of my my CSS skills. The layout I want is simply impossible to create with CSS. I think this codepen by Jan van Hellemond is a pretty clear explanation of the issue at hand. Thanks all for your comments, here, on Twitter and on Slack!

    • Trevor
    • #

    It seems like this is an issue with the container that the elements are in. You can set the width of the container and have it float to the right. Or maybe I do not understand the issue correctly but I think that is how its done.

    • Vasilis
    • #

    The issue is a bit more subtle than that. Setting the width would make it unflexible, which is not what I want. The problem is that an item with text that wraps is wider than the visible text. Which is simply how CSS works.