0

I am trying to make a footer at the bottom of the page which has 100% width. Using position: absolute;. I can achieve footer positioned at the bottom with the given code. However even after I add display: block; I can not get 100% width footer. I am wondering what is the using these two together in terms of positioning. For example does position override display value? Thank you in advance.

footer {
    text-align: right;
    position: absolute;
    /* display: block; */
    bottom: 0%;
    right: 0%;
    background-color: rgba(232, 232, 228, 0.5);
    border: 1px solid #fcd5ce;
}
yokus
  • 145
  • 2
  • 10

1 Answers1

1

Elements that are position: absolute behave the same as elements with display: block, so your display has no effect. Here's a good explanation: CSS: display:inline-block and positioning:absolute

Setting width: 100% should fix your problem.

RobertAKARobin
  • 3,933
  • 3
  • 24
  • 46