Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Flexbox Layout Building a Layout with Flexbox Creating a Sticky Footer with Flexbox

Jordan C
Jordan C
6,249 Points

Why doesn't putting auto top-margin on the footer work?

Here is my code:

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;

footer {
  margin-top: auto;
Antonio English
.a{fill-rule:evenodd;}techdegree seal-36
Antonio English
Front End Web Development Techdegree Graduate 18,103 Points

The spec says so. 10.6.2 Inline replaced elements, block-level replaced elements in normal flow, 'inline-block' replaced elements in normal flow and floating replaced elements

If 'margin-top', or 'margin-bottom' are 'auto', their used value is 0.


1 Answer

Hi, I had the same issue. It's because footer has the margin already set in the base.css file --> .main-footer {margin-top: 30px; } As class selector (.main-footer) has higher specificity than element selector (footer), it will overrule your footer {margin-top: auto;} style. You have to set .main-footer {margin-top: auto;} that should work.

14,136 Points

perfect thanks, I did exactly the same thing, I couldn't see why it didn't work.