The footer is seen positioned halfway down the web page

Accidentally, I placed my footer within the main tag which initially displayed correctly. However, upon correcting it, the footer ended up displaying between the header and the main sections... This project is extremely important for school and the deadline is tomorrow. If anyone could assist me with this issue, I would greatly appreciate it as I have been searching for hours without finding what went wrong, and it's starting to drive me crazy! Any help will be highly valued!

Here's the link to the site.

html{
  box-sizing: border-box;
  font-size: 62.5%;
  font-family: 'Fira Sans';
}
...

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Blue Monday</title>
  <link rel="icon" href="./assets/img/devine.png">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">
  <!-- <link href="https://fonts.googleapis.com/css?family=Fira+Sans" rel="stylesheet"> -->
</head>

<body>
  ...
</body>

</html>

htmlcss

Answer №1

The issue lies not between your header and main, but after your main section. The root cause is that your main section is not resizing because the .bg-flow element has a position of absolute, causing it to be ignored by the main section. Additionally, setting a fixed height for .bg-flow prevents it from expanding properly. By using Firefox's "Inspect Element" feature, you can visualize the borders of your elements which may aid in troubleshooting this problem.

Answer №2

Have you noticed that the footer doesn't automatically appear at the bottom of the page?

To fix this, consider implementing the following CSS:

footer { position: fixed; bottom: 0px; }

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

IE 9 isn't displaying the Dropdown CSS Navigation

Welcome to my test page. Click here to view the test page. I recently found out that this page is not displaying correctly on Internet Explorer 9. Since I don't have IE 9, I'm using Net Renderer to preview my test page. Below you will find my ...

htmlcssdrop-down-menunavigationinternet-explorer-9

Use jQuery to select all div elements within another div and then verify each one's class

Currently, I am implementing a chat system where I display messages using jQuery, JSON, and PHP. The issue I am facing is that I need to iterate through each div within the "#chatMessages" container, which houses the messages, and verify its class existenc ...

javascriptphpjqueryhtml

Is there a way for me to set a different color for the background below the svg and a separate color above the svg? I am hoping to achieve this unique design effect

I am looking to create a distinctive background design with different colors above and below an svg image. I have set a background image for the body element and will be using a grid layout with a transparent background color above it. My challenge is fin ...

htmlcsssvgbackground-imagelinear-gradients

What is the best way to eliminate empty space at the bottom of a page that is being caused by a button?

I have identified the reason for the blank space at the bottom of my page - it's due to a sticky "back to top" button. However, I am unsure how to resolve this issue. Here is the layout of the page: <nav> navbar </nav> <div> car ...

htmlcssbootstrap-5

Customizing the Height of Elements in Bootstrap

When working with two columns in bootstrap, let's say one column has a height of 800 PX. If you want the text in the second column to start after 200 PX, is there a way to achieve this without using padding or margin? Are there any predefined classes ...

htmlcssweblayoutbootstrap-4

The footer size appears inadequate on Chrome browser

Observing the element footer.mdl-mini-footer, I found that all the provided sizes were measured using F12 developer tools in Responsive Mode with a screen size of 768x884 (Chrome's Tablet breakpoint size). In Firefox, the element footer.mdl-mini-foot ...

htmlcssgoogle-chromematerial-design-lite

Tips for separating these two words onto two separate lines

I created this box using Angular Material, but I am having trouble breaking the words "1349" and "New Feedback" into two lines. Here's an image included in my design. Any tips on accomplishing this in Angular Material? Thank you! <style> . ...

htmlcssangularjsangular-material

Ways to dynamically adjust the heading of the following page based on the preceding one

I am faced with a challenge involving two HTML pages. The first page features 3 tables containing people's names and last names, while the second page houses a single heading element. My goal is to enable users to click on a table on the first page an ...

javascripthtmldom

What is the method for obtaining the ID of a dynamically generated DropDownList and verifying if its value has been altered?

I successfully created a view with the help of Steven Sanderson's blog where a dynamic number of textboxes and DropDownList are generated. Everything is functioning properly. However, I would like to ensure that the form cannot be submitted until each ...

javascriptjqueryhtml

Creating a dropdown navigation menu using CSS from href divs

I am working on a script that includes divs with images and href functions for clicking on them. <div class="home"><a href="index.php?pagina=home"></a></div> <div class="events"><a href="index.php?pagina=events"></a& ...

htmlcss

Post a message using HTML 5 within the same domain

I've been trying to figure out how to make the HTML postMessage function work but I'm having some trouble. I came across a few examples on various websites, but for some reason I can't seem to get it right. Below is the code for the two pa ...

htmlpostmessage

Creating an HTML table by populating it with data from a JavaScript array

Imagine you have a JavaScript array structured like this: [ "Heading 1", "Heading 2", "Data 1", "Data 2", "Data 3", "Data 4", ] Your task is to generate an HTML table from this array that looks like the one in this link: https://i.stack.imgur.com/7laUR. ...

javascripthtmlcss

Implementing an Angular function to close a window when clicking outside of it

I was browsing YouTube and came across a tutorial on how to create a directive that closes a window when clicking outside of it. However, I'm facing an issue with implementing this in my project. I built a simple to-do list application with the abilit ...

htmlangulartypescript

What steps can I take to mimic a pen-like behavior for my cursor on my sketching website project?

My goal is to create a 16x16 grid with a white background, where each grid item changes color when the mouse is pressed and moved over it, similar to paint. I have written a script to achieve this: let gridContainer = document.getElementById('grid-con ...

javascripthtmlcss

Can you please explain to me how to target a specific element by its ID in the DOM and then move on to the next element with the same ID using jQuery

During the event handling process, a scenario arises where two div elements end up having identical IDs within the DOM structure. While using JQuery, my objective is to specifically target the second occurrence of the div with the aforementioned ID in the ...

javascriptjqueryhtmlcssdom

Angular 2's innovative approach to implementing a sticky footer concept

Is there a way to make my footer sticky without being fixed? I attempted using the CSS negative margin trick, but it did not work as expected. In the provided Plunker code, I tried to replicate the issue in my Angular 2 app. The goal is for the footer to s ...

htmlcssangularsticky-footer

How to adjust the font size in the Angular Material Select Panel?

One way to customize the appearance of a panel in CSS is by using the panelClass attribute. <mat-form-field appearance="fill"> <mat-label>Toppings</mat-label> <mat-select [formControl]="toppings" panelClass=&quo ...

htmlcssangularsassangular-material

Chrome method for creating Flexbox columns of equal height

I am implementing a simple 2-column layout and I want to utilize Flexbox to ensure equal heights for the columns: HTML <div class="row flex"> <!-- menu --> <div class="col-xs-4"> <aside> Menu content wi ...

htmlcssgoogle-chromeflexbox

Deactivating functionality with JavaScript

I'm a bit perplexed about a section of code in my current side project. I am working on inputting data entry into my inputs and selecting options, then saving it to a variable for the image/patient utilizing the available fields (such as dropdown opti ...

javascriptcss.nethtml

Issue with Firefox: JQuery-UI checkboxes failing to be selected when using Shift or CTRL keys

UPDATE: After reviewing mark.hch's response, I discovered that this issue only occurs on Firefox. To clarify my previous explanation: I am not seeking assistance with the event handler - it was just provided as context. My specific requirement is for ...

javascriptjqueryhtmljquery-uifirefox