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
  • #259497

    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">
            <nav id="nav">
                • Text™ •
                {% block content %}
                {% endblock %}
            <footer id="footer">

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.