Sticky Definition Lists

No Comments

I ran throughout this 30 seconds of code web site the opposite day, and so they have a CSS part which is actually good! The primary instance snippet I checked out was this “floating part headers” instance, reminding me but once more how satisfying definition lists might be.

With good easy 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 (previously Swaziland)</dd>

The default browser styling — no CSS in any respect — seems to be like this:

So, every of these <dt>s, on this case, occur to be properly tucked away to the left within the area that the margin-inline-start makes for the <dd>s. Which implies that in extraordinarily little CSS we are able to kick on that “stick sections” idea:

dt {
place: sticky;
prime: 0;
background: white;
show: inline-block;

I really like the simplicity of that.

And now that the core “performance” works, the remainder of the styling is simply aesthetic sugar:

CodePen Embed Fallback

The model on 30 seconds of code makes use of a CSS Grid format for the listing objects, which admittedly is extra strong. I simply thought it was attention-grabbing how shut you may get in so little CSS with out it. Additionally they have a model the place the <dt>s stretch the entire width which can be good.

The publish Sticky Definition Lists appeared first on CSS-Methods. You possibly can assist CSS-Methods by being an MVP Supporter.

    About Marketing Solution Australia

    We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

    Request a free quote

    We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

    Subscribe to our newsletter!

    More from our blog

    See all posts

    Leave a Comment