Question

This is something that I figure should be straightforward, but I can’t seem to figure it out, and spending a couple of hours on a single list is driving me nuts.

What I’m trying to do is create a 2-column list, with “labels” on one side, and values on the other. I can get it to work if I leave font weights normal, or have both sides bold, but as soon as I make the labels bold and values normal, it staircases.

A screenshot of it with bold
A screenshot without bold

The applicable CSS:

ul.info {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.info li.name {
    width: 150px;
    float: left;
    font-weight: bold;
}

ul.info li.value {
}

The HTML:

<ul class="info">
    <li class="name">Member Since</li>
    <li class="value"><?=$user->registerTime ?></li>

    <li class="name">Last Logged in</li>
    <li class="value"><?=($user_login !== null ? $user_login->login_time : 'Never') ?></li>

    <li class="name">Email verified?</li>
    <li class="value"><?=($user->emailVerified ? 'Yes' : 'No') ?></li>
</ul>

I’ve narrowed it down to the bold, but it doesn’t make sense why that would break it. Any ideas?

Answer 1

I suspect it will be down to the bold elements having extra vertical space being added somehow, which would explain why the floating isn’t becoming staggered. Do you have a consistent line-height property applied to the list elements?

You’d be much better off using a definition list, rather than an unordered list. That way you can style dt and dd elements entirely separately, with the added advantage of your markup being much more semantic.