Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Footer at the bottom using Flex; what is it I am doing wrong?

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #259497
    Braintrash
    Participant

    I am trying anything, but I can’t have my footer getting in the bottom using the tutorial on CSS-Tricks.
    Any help appreciated for helping me understand what I am doing wrong, cause it’s so much getting on my nerve I am thinking about going back to tables.
    Thanks in advance.


    body { background: #ffffff; display: flex; height: 100vh; min-height: 100vh; flex-direction: column; } #container { margin: 0 auto; width: 960px; } #header { background-image: url("header.png"); height: 150px; } #nav { text-align: center; } #content { border-bottom: 1px solid; border-top: 1px solid; padding: 10px 0px; flex: 1 0 auto; } #footer { text-align: center; }
    <div id="container">
            <header id="header">
            </header>
            <nav id="nav">
                • Text™ •
            </nav>
    
                {% block content %}
                {% endblock %}
    
            <footer id="footer">
                Text
            </footer>
        </div>
    
    #259505
    Paulie_D
    Moderator

    You need to make the #container a flex-parent too…flexbox is not inherited by children.

    https://codepen.io/Paulie-D/pen/LjJoMp

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.