Unable to change the background color of the footer section

Hi everyone, I've been trying to set a background color in a div tag but for some reason it's not working. I suspect there might be a floating element causing the issue within my div, but I'm not sure how to resolve it.

Here is the HTML code:

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

And here is the CSS code:

#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');
}
htmlcsscss-float

Answer №1

What is the reason behind using position:absolute; when you can achieve the same result with a different approach?

If you decide to utilize the position property, keep in mind that the parent div will not automatically adjust its height unless specified. This is because elements with position: absolute are taken out of the normal flow of the document.

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

Answer №2

regarding the use of position:absolute :

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

reason:

The h2 element has a position of absolute, causing it to be entirely removed from the standard document flow and resulting in #footer having a computed height of 0.

solution:

To rectify this issue, you need to specify a value for either the height or min-height property 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with style display:none not functioning in IE8, IE9, and IE10 when in Compatibility View mode

I am facing an issue with two DIVs on my webpage. One of them is set to have display:none based on certain conditions. Surprisingly, it works perfectly fine on IE10, Firefox, and Chrome. However, the problem arises on IE8, IE9, and IE10 Compatibility Vie ...

javascriptjqueryhtml

Make the width of a table column match the width of the header

I am currently using Primeng2 datatable and I am looking to adjust the column width to match the header size. This is my HTML code: <p-dataTable #dtselfcollectmonthly [exportFilename]="exportname" [rows]="10" [value]="rawdatatrucks"> <ng-con ...

htmlcssangularprimeng

Select the image to be taken to a new page where the chosen image will be seamlessly integrated into the new layout

Imagine I'm in the process of developing a fictional online guitar store. A crucial feature on my homepage is an image carousel, and I want users to be able to click on these images and seamlessly transition to a product page showcasing more details a ...

javascriptjqueryhtmlimage

arranging the table within the div

I have utilized the following code snippet to exhibit data in an HTML table while enhancing the loading time for large datasets. Code Snippet: <body onload="load();"> <div id="Grid" style="overflow:scroll; width:600px;height:300px; ons ...

javascriptjqueryhtml

The HTML5/JQuery/JSON webpage is currently experiencing difficulties retrieving data

I'm having trouble with the code below. It's not displaying anything. Can anyone help me fix it? <!DOCTYPE html> <html> <head> <title>Flight Data</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/ ...

jqueryajaxjsonhtml

Best practices for incorporating a CSS file into a Laravel view

As a beginner in Laravel, I am attempting to add a CSS file to my view. The specific location of the css file is resources\assets\css\style.css The command I am using to include it is: <link rel="stylesheet" href="{{ URL::asset(&apo ...

csslaravel-5

unable to locate text within tag a using javascript

I developed JavaScript code to search for tags within an accordion. function tagSearch(){ let keyword = document.getElementById('find').value.toUpperCase(); let items = document.querySelectorAll('.accordion'); let links = document ...

javascripthtmlbootstrap-5

Using jQuery's .html() method to update the inner HTML of an element can cause the .click() event on a form button to stop functioning

There is a puzzling issue with my HTML form button and jQuery functionality. The button is supposed to trigger a .click() event from a JavaScript file, and it was working perfectly until I used jQuery .html() to replace the main page content with the form ...

javascripthtmljquerybuttononclick

Jsoup has removed HtmlToPlainText from its features

Currently, I am in the process of transforming HTML into plain text. Initially, I relied on jsoup's HtmlToPlainText for this task. However, it seems that in recent releases of jsoup, this functionality has been removed as it was intended solely as an ...

javahtmljsoup

Styling Borders in CSS/HTML

Having an issue with the CSS on my website, specifically when hovering over links in the navigation bar. I'm trying to add a border around the link when hovered over, but it's causing the other links to shift position. Here's what I have so ...

htmlcssborder

Removing HTML tags from Angular template bindings

My data list sometimes includes HTML elements <li *ngFor="let result of results"> <span [innerHTML]="result.question.title"> </span> </li> The issue with using innerHTML is that the HTML is parsed and rendered, affecting ...

htmlangularangular2-template

What is the best way to center align my button using CSS?

I'm struggling with aligning this button in CSS to the center: .btn { background-color: #44c767; -moz-border-radius: 28px; -webkit-border-radius: 28px; border-radius: 28px; border: 1px solid #18ab29; display: inline-block; cursor: poi ...

css

Using jQuery to generate nested lists

I have attempted various solutions for creating nested ul/li elements without success. I am a beginner in JavaScript and struggling with this task. The data is retrieved after the page has loaded, and it looks like this: data = { "key1": ["value1", va ...

javascriptjqueryhtmlcssnested

Is it possible to modify the border colors of separate elements in Bootstrap 5?

<div class="m-3 p-3 border-5 border-top border-danger border-bottom border-primary"> Can borders be styled with different colors? </div> Is there a method to achieve this, possibly using sass? ...

csstwitter-bootstrapbootstrap-5

What is preventing the question div and buttons from expanding according to their content?

After experimenting with setting the height of the question div to auto, I found that it would stretch to fit its content. However, I am looking for a solution without overflow: auto or scroll. Is there a limit to how responsive it can be once a certain ...

htmlcss

What is the best way to make the middle div stretch and fill the entire width of the screen while taking into consideration headers and footers?

Check out this JSFiddle link for more details <div class="navbar"> navbar </div> <section> <header>header</header> <div class="chat"> chat window </div> <footer> <textarea ...

htmlcss

The Bootstrap dropdown feature is acting up when included in the header PHP file

I'm having an issue where the dropdown in my header.php file is not working when I include it in my home.php page. The navigation bar appears correctly, but the dropdown feature doesn't work. Can someone please assist me with this? Below are the ...

phphtmlcssdrop-down-menutwitter-bootstrap-3

Sorting in descending order in jquery Datatables does not function properly when using the "order" option

Can someone help me figure out how to order my jQuery datatable? I've been struggling to get the first column to sort in descending order even after using "order": [[0, 'desc']]. You can check out the JS fiddle here. <table id="datatabl ...

javascriptjqueryhtmlsortingdatatables

Arrangement of HTML divs and styling classes

I have been experimenting with divs and classes in order to achieve proper alignment of text on my website. Currently, I am working with 2 classes that I would like to display side by side to create 2 columns. However, the right column containing the text ...

htmlcss

How can we focus href on a <div> using CMS in PHP?

I am currently in the process of learning PHP and simultaneously tackling a redesign of a custom CMS. The CMS is written in PHP, and I have already revamped the default menu using CSS to incorporate a side slide effect. However, my next challenge is to en ...

phpjqueryhtmlhreftarget