Sticky Definition Lists

Avatar of Chris Coyier
Chris Coyier on (Updated on )

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

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:

<div class="floating-stack">

    <dd>Burkina Faso</dd>

    <dd>Cabo Verde</dd>
    <dd>Central African Republic</dd>
    <dd>Congo, Democratic Republic of the</dd>
    <dd>Congo, Republic of the</dd>
    <dd>Cote d'Ivoire</dd>


    <dd>Equatorial Guinea</dd>
    <dd>Eswatini (formerly Swaziland)</dd>

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

So, each of those <dt>s, in this case, happen to be nicely tucked away to the left in the space that the margin-inline-start makes for the <dd>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:

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 <dt>s stretch the whole width which is also nice.