I noticed a significant space below the footer on my webpage. As a first-time website creator, are there any solutions to this

I'm currently in the process of working on my very first website for a study project using HTML and CSS. There's an issue where there is a large gap below the footer that I can't seem to eliminate. I've only completed 3 pages so far, but this problem is occurring on 2 out of the 3 pages.

Because it's over 2000 lines long when combined, I've uploaded the pages onto PasteBin rather than posting all the code here:

1 - https://pastebin.com/9ds87Jft

2 - https://pastebin.com/SMtkFVzR

<!-- Start of Code -->
<!DOCtype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Pop Stop — New Zealands Best Range of Pop Vinyl!</title>
    <!-- Start of Styling -->
    ...
    <!-- End of Code -->

Answer №1

First of all, I couldn't access the links you provided, which could be due to filtering or other restrictions. However, thank you for sharing some of your code so I can help answer the question.

Secondly, if this is a result of self-study, well done and keep up the good work. But if this is from a course, then the teacher should be held accountable!

My friend, avoid using positions for every element as it's usually unnecessary and can cause issues like these.

The main issue here is that you're pushing your elements offscreen, making them invisible but still present in the layout. You might see empty space on the screen and think it's actually empty, when it's not.

Since you mentioned you're learning web design, let me give you a lifesaving tip for your career: use positions only when absolutely necessary to maintain the natural flow of your page. Don't try to fit elements onto the screen like puzzle pieces or you'll encounter problems and struggle with responsiveness.

Specifically, use position absolute sparingly (position relative is much easier to work with). Use positions for overlapping elements, sticking one element to another, or keeping elements fixed on the viewport occasionally.

While there are more use cases for positions, it's best to avoid using them unless you have experience and know exactly when they're needed.

Also, remember that using large numeric values for margins, paddings, left, right, etc. (more than 100px) is usually a sign of error. Using over 500px indicates a significant mistake, and you should consider alternative solutions like float, flexbox, or grid layouts.

Best of luck!

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

Checkbox: Customize the appearance of the root element

I am trying to modify the root styles of a Checkbox component, but it is not working as expected. Here is my code: <CheckboxItem onChange={()} checked={isChecked} label="Show Checkb ...

Tips on linking a condition-reaction to document.querySelector

I am struggling to connect the condition-reactions to the input id of passid. I am unsure where to place the document.querySelector() method in order to link the indexed conditions correctly. Below is the code snippet: <!doctype html> <html> ...

Display modal after drop-down selection, triggered by API response

Currently, I am working on integrating an API to enable users to make payments through a modal. Users should be able to enter an amount and select a payment frequency. I have successfully extracted various payment frequencies from the API response and pop ...

Error: "$$" not defined in this context

I am currently working on generating a dynamic pie chart programmatically with the intention of transforming it into a reusable React Component. The main idea is to have an interactive pie chart where each slice expands into a full pie when clicked. I came ...

Leverage htaccess functionality to modify website configurations without altering the URL

I currently have the following htaccess configuration: <IfModule mod_rewrite.c> RewriteEngine On RewriteRule ^(.*)$ dl.php?id=/$1 [QSA,L] </IfModule> It works perfectly fine. However, I am facing a problem with my site URLs and images ...

Creating a floating div that remains in place without disturbing the layout of the surrounding elements on

I am trying to place a div within a page at specific coordinates without affecting the rest of the content on the page. My initial approach was to give the parent container a position: absolute and the floating div a position: relative, then setting the p ...

Issue with the functionality of max-height in a CSS grid container

Update: After receiving clarification from @onkar-ruikar, I realized that my original problem was quite misunderstood. While I still haven't figured out how to properly handle the cyclic dependencies issue, I decided to address it separately. As a res ...

Is there a way to include an edit, delete, details, and create new icon in an @html.actionLink within MVC?

This HTML code is specific to MVC and represents the formatting used: 1. @*@Html.ActionLink("Delete", "Delete", new { id=item.ActivityDepreciationTypeId })*@ 2. @*@Html.ActionLink("Details", "Details", new { id=item.ActivityDepreciationTypeId })*@ ...

Using the identical code, Wicked PDF generates distinct reports on separate computers

While utilizing Ruby on Rails to render a PDF using WickedPDF and sending it via email, I encountered an unexpected issue. The same code is present on two separate computers, both with up-to-date versions synced from GitHub. However, the generated PDF repo ...

Sorting functionality malfunctioning after dynamically adding new content using AJAX

Greetings to all, I have a question about my views. 1- Index 2- Edit In the index view, I have a button and AJAX functionality. When I click the button, it passes an ID to the controller which returns a view that I then append to a div. The Edit view con ...

What's the Best Way to Add a Border to My Two-Column Form?

I'm currently working on a reservation form for my website with a 2-column layout. In one column, I have tables, and I've been trying to add a divider between the columns but haven't found a solution yet. Despite researching ways to add a d ...

Changing the .load function based on user input

Can I replace a .load text with one that can be updated by a user using form input or similar method? My goal is to create a code that retrieves data using unique div IDs (specific to each employee) containing information within tables across various HTML ...

Retrieve the file path of an uploaded image in a Razor view using jQuery Ajax

I have been facing challenges while working on an ASP.NET MVC3 application where I am developing a custom image gallery. The browser being targeted is IE9, which rules out the option of using HTML5 File API. All my code resides within a strongly typed Razo ...

Generate a container element that occupies the remaining space on the screen under a header of adjustable height

I'm trying to create a layout where the header height can vary, but the footer has a fixed height. I want the left nav and content sections to fill the screen height, with the left nav having a fixed width and the content taking up the remainder. Is ...

What is the best way to split a semicircular border radius in two equal parts?

Is there a way to halve the yellow line or remove it from above the red box, while keeping it below? Can this be achieved using just HTML and CSS, or is JavaScript necessary? * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 1 ...

Series of responses cascading from one another

Users are experiencing an issue where the need for adjusting margins based on the depth of responses in posts. Currently, this involves setting a margin-left value of 40px for one level deep reactions and 80px for two levels deep, and so on. To address th ...

CSS Priority - determining the ultimate winner

I have an upcoming exam and I'm reviewing the previous exam paper that was given to me. The question is: When multiple style sheet rules are applied to the same element, which type of rule takes precedence? a. Any declaration from the browser b. ...

Ways to navigate through a webpage without encountering any overflow issues

My window is too small to scroll, but I still need the ability to do so. Is it possible to scroll even when the height of the container is not large enough to display the scrollbar? Below is the code I am using to achieve scrolling: setTimeout(function() ...

employing personalized CSS styles

When I implement the following code: <div class="metanav"> ... </div> Every element inside that div will inherit the styling of .metanav. But if I duplicate .metanav in the CSS and rename it to A; then update the div's class to: <d ...

What is the best way to update placeholders in Angular 8+?

I have a collection of items: a = ['apple', 'mango', 'grape', 'papaya', 'banana', 'cucumber']. An input element is present with a placeholder stating select from fruits (the array elements should ...