Can not get footer down to buttom

HTML-CSS
1

Im using Angular but i dont think it would matter because this is pure html and css

I have tried to use flexbox on body techniqe and margin-top: auto on the footer
but it did not work.

I can either make it work by giving the Footer a Position: absolute; bottom: 0px
wich does make it stick to the bottom but it will also overlap the content and the navbar if i make the window smaller.

if i do Position: relevant; it will just float in the middle.

So what do i do?

footer{
  width:100%;
  margin-top:auto;
}

also tried

width:100%;
position: absolute;
bottom: 0px


body{
  display: flex;
  flex-direction: column;
  min-height: 100%; //I also tried min-height:100vh and height 100% and height 100vh
}

html

<html>
<body>
  <nav></nav>
  <div class="container"></div>
  <footer></footer>
</body>
</html>

Template
Template1904×992 358 KB

2

You have to decide if you want the footer to simply come after the main content or be fixed to the bottom of the window. When using fixed headers and footers you have to add margin to the main content so that it clears the header and footer and can be seen.
As for position it’s “relative” not “relevant”
position: relative;

3

Hello @jeffreyPr,

Sorry, I have troubles to understand what is really your issue. The issue you meet is that you would like that the footer content be on a row align and not column align right?