{}
Learn web design and development
Free interactive courses
← Back to CSS
76

Footer component: responsive layout and sticky footer logic

Learn how to design scalable footers with clean semantics, responsive Grid and a modern sticky-footer pattern, so the bottom area of the page stays useful instead of feeling like an afterthought.

How much do you know about CSS?

📘 Theory

Semantic footer structure

Brand, links and legal content should live in clearly separated groups.

Inside ``, organize the content into distinct areas such as branding, secondary navigation and legal information.

When the footer contains several link groups, use short headings and simple hierarchy so the scanning effort stays low.

Make sure contrast remains strong on dark surfaces and keep keyboard focus visible on all interactive links.

  • Semantics: use `footer` and `nav` where appropriate.
  • Accessibility: visible focus and descriptive links.
  • Consistency: separate navigation from legal information visually.

Responsive multi-column layout

Bidirectional control for the classic “fat footer”.

1

Use `repeat(auto-fit, minmax(...))` so the columns reorganize automatically according to the available width.

2

That reduces the need for excessive breakpoints and helps the footer stay readable on mobile, tablet and desktop.

Sticky footer without brittle hacks

How to stop the footer from floating awkwardly on short pages.

1

When a page has very little content, the footer can end up sitting halfway up the viewport. The modern solution is to let the root layout use Flexbox.

2

With `min-height: 100vh` on the page shell and `margin-top: auto` on the footer, the footer naturally stays at the bottom when there is not enough content to push it there.

🧪 Learn by doing

🧰 Resources

Useful links

MDN - `<footer>` MDN CSS MDN Layout Cookbook
Test

Check your knowledge with a test about CSS.

Test for CSS
CodePen: UI cards with hover and layout patterns
Open in CodePen
Course resources 78
📘 Glossary 🎧 Audio 📄 PDFs 🖼️ Infographics 🎬 Videos 🔗 Links 🧠 Flashcards 🧩 Snippets
‹
Lesson 75
Sidebar component: adaptive lateral navigation
Lesson 77
Curated CSS resources: documentation, generators and practice
›

What is this?

I'm Cristian Eslava and I sometimes build websites so both you and I can learn and experiment. culTest

I made this in February 2026 to make learning easier for my students. The idea is to learn web development by practicing and to keep expanding the project with new topics, tests and challenges.

It draws inspiration from MDN, W3Schools, CodePen, Manz and many other web development references. I wanted to combine useful theory, runnable examples, challenges and the testing system I had already built for culTest. culTest

If you liked it, if you didn't, or if you want to get in touch, write to me at cristianeslava@gmail.com