CODEWITHSUNDEEP
htmlcss
notnull
notnull

Reputation: 2028

Put div to the bottom of parent without absolute

What I am trying to do is:

HTML

<footer>
   <!-- ... -->
   <span class="copyright">abc</span>
</footer>

CSS (sass)

footer {
  // ...

  text-align: center;

    > .copyright {
        position: absolute;
        bottom: 0;
        display: inline-block;
    }       

}

So simply to pull the copyrigh down to the bottom of the parent block and center it. It's pretty easy using position: absolute, however, the centering the way using display: inline-block on the child element and text-align: center on the parent element wouldn't work then.

Is it possible to put the copyright down while keeping it relative?

Upvotes: 2

Views: 9192

Answers (2)

Paulie_D
Paulie_D

Reputation: 114990

Flexbox can do that if the height of the parent is defined or resolvable.

Complete Codepen Demo

footer {
  height: 150px;
  width: 80%;
  margin: auto;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
}
header {
  background: plum;
}
.copyright {
  margin-top: auto;
  /* push to bottom */
  background: red;
  align-self: flex-start;
  /* collapse to own width */
  margin-left: auto;
  /* centering */
  margin-right: auto;
}
<footer>
  <header>I'm a header</header>

  <span class="copyright">Copyright</span>
</footer>

Upvotes: 9

NotJustin
NotJustin

Reputation: 529

Although I agree flexbox can be used, its browser support is not awesome on IE (Caniuse).

I would use just simple block with text-centering. JS Fiddle

Here it is in simplicity:

footer {
    border: 1px solid #900;
}

footer > .copyright {
    padding: 50px 0 10px;
    text-align: center;
}

If you really need to use inline-block, add this to copyright CSS:

display: inline-block;
width: 100%;

Upvotes: -1

Related Questions