Sticky Definition Lists

I ran across this 30 seconds of code website the other day, and they have a CSS section which is really good! The first example snippet I looked at was this “floating section headers” example, reminding me yet again how satisfying definition lists can be.

With nice simple HTML like this:

A
Algeria
Angola
B
Benin
Botswana
Burkina Faso
Burundi
C
Cabo Verde
Cameroon
Central African Republic
Chad
Comoros
Congo, Democratic Republic of the
Congo, Republic of the
Cote d’Ivoire
D
Djibouti
E
Egypt
Equatorial Guinea
Eritrea
Eswatini (formerly Swaziland)
Ethiopia

The default browser styling — no CSS at all — looks like this:

So, each of those

s, in this case, happen to be nicely tucked away to the left in the space that the margin-inline-start makes for the

s. Which means that in extremely little CSS we can kick on that “stick sections” concept:
dt {
position: sticky;
top: 0;
background: white;
display: inline-block;
}
I love the simplicity of that.
And now that the core “functionality” works, the rest of the styling is just aesthetic sugar:
CodePen Embed Fallback
The version on 30 seconds of code uses a CSS Grid layout for the list items, which admittedly is more robust. I just thought it was interesting how close you can get in so little CSS without it. They also have a version where the

s stretch the whole width which is also nice.

Typed at

Share your love

Leave a Reply