Sticky Definition Lists
While browsing the CSS section of the 30 seconds of code website, I came across their “floating section headers” snippet. It's a great reminder of how satisfying and underused definition lists can be in everyday layout work.
The underlying HTML is refreshingly straightforward, relying on native <dl>, <dt>, and <dd> elements. Without any CSS, the default browser rendering provides the semantic structure you'd expect.
The clever part is how the structure enables a “sticky sections” effect with remarkably little CSS. Since each <dt> sits naturally to the left of its corresponding <dd>s — tucked into the space created by the margin-inline-start on the descriptions — the core functionality emerges almost for free. That elegant simplicity is the hook.
Once the behavior is in place, everything else is just aesthetic decoration. The 30 seconds of code version takes a more robust approach, using CSS Grid to lay out the list items, but it's interesting to see how close you can get without that. They also offer an alternate version where the <dt>s stretch the full width, which is equally worthwhile.
