"Footers that are not displaying correctly in full width

I am currently working on a website (visit 4beaufort.co.uk) that has a footer (#page-bottom) with the following CSS properties:

#page-bottom {
width:100%;
margin-top:3%;
margin-left:0%;
margin-right:0%;
margin-bottom:0%;
position:absolute;}

To make the footer span 100% of the screen, I had to set its position to absolute. However, despite my efforts, it only extends about 98% of the screen width, leaving a small gap on the right side. This is causing some horizontal scrolling issues for the content above the footer. Can anyone help me figure out what I'm doing wrong?

I have reviewed the style sheet extensively to check if I missed setting a container correctly. All containers have been assigned a width of 100%, but the issue persists.

Answer №1

It appears that there may be a conflict in your stylesheet where you have set 100% width and padding for the same class or ID. This issue does not seem to be related to #page-bottom. I recommend reviewing all IDs and classes within the page, as the problem likely stems from the #page element in the stylesheet.

Answer №2

Simply replace the position:absolute with float:left. Problem solved!

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

Looking for guidance on how to use Python to populate an HTML document

I have a text file containing a conversation structure like this: name and date message name and date message and I already have an HTML/CSS template and a Python script that can read the text. My goal is to extract each name, date, and message from t ...

Is there a way to switch the display of an icon using Font Awesome and Angular?

I'm attempting to switch between the sort-amount-asc and sort-amount-desc classes while also including another icon in the initial state, using Angular. I attempted to use a ternary operator within ngClass but am struggling to make it work with the fo ...

Profile picture in perfect proportion

Have you ever wondered how Facebook maintains the proportions of your profile picture? Is there a special algorithm in place? I've observed that the maximum width of the profile picture div is set to 180px, and the height adjusts proportionally to the ...

What is the reason behind the default font size being longer than 1em?

During my experimentation, I encountered an issue. I set the height of a div to 1em, expecting it to contain the entire text within. However, it did not. In my browser, 1em is equivalent to 16px. On not specifying the height of the div, it successfully co ...

A different way to center elements using CSS

Many criticize the center tag, but I find that it consistently aligns things perfectly for me. Despite its deprecation, I still rely on it. I've come across suggestions to use the mysterious CSS margin: 0 auto;, but I struggle to make it work (refer ...

Expanding a list in AngularJS: Implementing a scrollbar for a seamless user experience

I need assistance in creating a layout using AngularJS and angular-material that includes a vertical scrollbar when necessary: <div layout="column"> <div> <!-- Occupies 80% of window browser --> <md-list> <md-l ...

Issues with updating web pages on Google Chrome

Having an issue with Google Chrome not updating the new CSS on my website without clearing the cache every time. It's a concern because we can't expect visitors to constantly clear their cache when visiting. Does anyone have a solution for ensuri ...

Utilizing Python Selenium to Interact with Buttons

Encountering an issue while trying to use Selenium to click on a tab or button within my web application. Below are the code snippet and CSS selectors: Error message: selenium.common.exceptions.NoSuchElementException: Message: Unable to locate element: #t ...

Having trouble loading @font_face on my Wamp localhost?

I've been attempting to incorporate a custom font into my website but have been facing difficulty. I'm unsure whether I am using the correct or incorrect path. Can someone please assist? @font-face { font-family: XfinityStandard; src: url(&a ...

Pressing the icon will trigger a top-sliding dropdown mobile menu to appear

How can I ensure my mobile dropdown menu slides in from the top when the user clicks the "header-downbar-menu" icon and slides out to the top when clicked again? Currently, the button only shows the menu but I am struggling with writing the JavaScript for ...

The use of backdrop-filter results in artifacts appearing in rounded corners

I am experiencing an issue with a CSS animation where I have an element that fades and child elements with a backdrop-filter to blur the background in Safari. There are two specific problems: The element's rounded borders are showing dark shadow ...

Initial space in model variable not being displayed

Hey there, I am working with a model variable called "name" that is linked to a span element like this: <input type="text" ng-model="name"> <span ng-bind="name"></span> My goal is to display the text entered in the input field without r ...

Implement a horizontal scrollbar for your table in HTML

I need to implement a horizontal scroll bar for my table. Here is the HTML code: Even though I have utilized Bootstrap, the horizontal scroll bar is not working for this particular module. It works fine in other modules. The tbody data is added after an ...

Position the component at the center of another component

Looking to center a component inside another component. I have a div with two components - the main one and a banner that I want to display in the center of the main component. Check out my issue on this jsfiddle: https://jsfiddle.net/CanadianDevGuy/vjb4k ...

Generate dynamic lines with evolving hues using CSS3

While working on a fresh web project, I came across the need to emphasize my headers (h1, h2, h3, h4) with underlines. My goal is to have these underlines grow and change color dynamically, similar to what can be seen here: . Is there a way to achieve thi ...

Tips for creating line breaks using flex-shrink in CSS?

Currently, I am in the process of creating a chat-like system and have been using this sample as a reference: One adjustment I made was replacing <input type="text"> with <textarea> since messages often consist of multiple lines. Ho ...

What is the best way to define the maximum width for responsive images in Bootstrap 4?

Query: How can I control the max-width of an image in Bootstrap 4 without losing its responsiveness? Context: Bootstrap 4's .img-fluid class ensures images remain responsive. The image is set to scale with the parent element by utilizing ma ...

Sideways scrolling carousel/slider

Currently, I am in the midst of a project page where my aim is to incorporate a horizontal scrolling project/image slider. Strangely enough, all my attempts thus far have failed to produce the desired outcome. This is the layout: the projects must transit ...

Overlap caused by padding between two elements

I'm encountering an issue where adding padding to a block element is causing it to overlap with the padding of other elements. Below is the code snippet showcasing this problem. <section class="hero"> <h1>Studying REDEFIN ...

Transform your HTML table into clickable links

https://i.sstatic.net/forOz.jpg Just starting out in html. Here's my html code that retrieves Json data from the server and displays it in an HTML table format. Could someone modify my html code to include a button between Video Link and Video Im ...