CODEWITHSUNDEEP
htmlcsscss-float
K. Patel
K. Patel

Reputation: 73

Can't set background color in footer

Hey guys I am trying to set a background color in a div tag, however nothing is happening. I feel like it is I have a floating element in my div, however I do not of have any way to solve it.

HTML

<div id='footer'>
      <h5>©Krish International Inc.
      </h5>
    </div>

CSS

   #footer {
        background-color: deepskyblue;
      }
 h5 {
    font-weight: normal;
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 30px;
    font-family: 'hind';
@font-face {
    font-family: 'hind';
    src: url('C:/Users/lakes/Desktop/hind2.ttf')
  }

Upvotes: 2

Views: 1001

Answers (2)

LKG
LKG

Reputation: 4192

Why you are using position:absolute; when you simply get it by following approach.

If you need to use position that parent div did't get height by default until you not give. because when we use the position: absolute div or tag come out of the flow.

  #footer {
  background-color: deepskyblue;
  width: 100%;
}

h5 {
  font-weight: normal;
  /* position: absolute; */
  width: 100%;
  display: block;
  text-align: center;
  font-size: 30px;
  font-family: 'hind';
  @font-face {
    font-family: 'hind';
    src: url('C:/Users/lakes/Desktop/hind2.ttf')
  }
<div id='footer'>
  <h5>©Krish International Inc.
  </h5>
</div>

Upvotes: 1

Ehsan
Ehsan

Reputation: 12951

about position:absolute :

When set to absolute or fixed, the element is removed completely from the normal flow of the document.

cause:

h2 have position absolute so removed completely from the normal flow of the document and #footer get height:0

Fix:

You must define height or min-height for #footer.

 #footer {
        background-color: deepskyblue;
        height: 100px;<------------Added
       //Or min-height:100px;
}


 #footer {
        background-color: deepskyblue;;
        height: 100px;
  }

 h5 {
    font-weight: normal;
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 30px;
    font-family: 'hind';
  }

@font-face {
    font-family: 'hind';
    src: url('C:/Users/lakes/Desktop/hind2.ttf')
  }
  <div id="footer">
      <h5>©Krish International Inc.
      </h5>
    </div>

Upvotes: 0

Related Questions