Odd spacing at the bottom of the page

I'm experiencing an issue with the footer on my homepage - it has a strange margin around it that I can't seem to get rid of. What I really want is a simple footer with 100% width, similar to the one on this page. However, as you can see in the image I've provided, there is currently a 9px margin on the left, right, and bottom.

Here is the CSS I am using:

#footer_container{

    background: #181818;
    height: 200px;
    width: 100%;
    bottom:0;
    left:0;
    margin:0px 0px 0px 0px;
}

HTML 

<body>
</body>
<div id="footer_container">
</div>

This is what it currently looks like:

htmlcssfootersticky-footer

Answer №1

To enhance the appearance of your website, remember to include a CSS rule specifically for the HTML body:

body {
    padding: 0;
    margin: 0;
}

Your body section should have a structure like this (div nested within body):

<body>
    <div id="footer_container">
    </div>
</body>

Answer №2

Something is not quite right here, as your footer seems to be placed outside of the body element:

<body>
  <div id="footer_container">
  </div>
</body>

In order for the width:100% to work properly, you should remove the margin on the body element.

body {
    margin:0;
}
#footer_container{
    background: #181818;
    height: 200px;
    width: 100%;
    bottom:0;
    left:0;
    margin:0px 0px 0px 0px;
}

I have created a JSfiddle link so you can see the changes in action.

Just a quick note: if there is a specific reason why your footer is intentionally positioned outside the body, I would advise reconsidering this for compatibility and potential SEO implications.

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

PHP failing to insert data

I'm facing an issue where my PHP code is not inserting any data. I have a form that displays values, but the update code doesn't seem to be working. Can someone please help me with this problem? Here is the PHP code snippet: if (isset($_POST[&ap ...

phphtmlsql

Implementing a watcher property in JavaScript to dynamically add a class to an element

I'm currently facing an issue where I need to apply a class to an element when a certain data property changes. My approach involves using a watcher to monitor the value change and adding a class through JavaScript, as demonstrated in the code snippet ...

javascriptcssvue.js

The size of the popup does not align properly with the content within it

After creating an extension for Chrome, I specified the dimensions of the popup to be 600 x 300 px. Everything was working perfectly until Chrome updated to version 27. As shown in the screenshot, I set the width and height using CSS, but there is still a ...

javascripthtmlcssgoogle-chromegoogle-chrome-extension

Is there a way to dynamically update the content of <li> tag with values from an array every x seconds

I am trying to create a li list using jQuery that will update every 2 seconds with new content, similar to game news updates. However, I'm encountering an issue during the first cycle where it skips the second item in the array. The subsequent cycles ...

javascriptjqueryhtmlcss

What could be causing the malfunction of my href directory in my ReactJS project?

When I click the "Join Now" button, I am attempting to navigate to a specific file but it does not appear to be functioning as expected. In the image below, you can see that on line 9 there is an href for '/auth/login', however, when I click the ...

htmlreactjshyperlinkhref

Is there a way to extend a div to occupy two rows?

I am attempting to accomplish the following task: https://i.sstatic.net/BH7Su.png Here is my markup: <div> <div>A</div> <div>B</div> <div>C</div> </div> Can this be achieved using grid, bootstrap ...

htmlcsstwitter-bootstrap-3flexboxgrid

Tips for submitting a form with multiple fields that share the same name attribute using ajax:

I have created an HTML form <html> <head></head> <form> <input type="text" name="question[]" /> <input type="text" name="question[]" /> <input type="file" name="image" /> <input type="submit ...

javascriptphpjqueryhtmlajax

Anchor tag remains in fixed location in HTML

Here's a link that I need help with: <a id="readmore" href="#">READ MORE</a> Currently, when the user clicks on this hyperlink, I am using Jquery to toggle the content below it to show/hide the content. However, I have encountered an ...

jqueryhtml

Is it possible to enable an email hyperlink to function on a computer?

I successfully created an email link that is functional on mobile devices by using 'href="mailto:[email protected]"'. When I click on the button from a mobile device, it prompts me to choose how I want the email delivered. However, when I tr ...

htmlhtml-email

Error: The URL specified in /accounts/detail could not be found

I encountered an error with the message "NoReverseMatch at /accounts/detail - Reverse for 'upload' with arguments '()' and keyword arguments '{}' not found. 1 pattern(s) tried: [u'accounts/upload/(?P\d+)/$']". T ...

pythonhtmldjango

The CSS styles are not being applied to the header and footer sections in the PDF file created with

When I try to add a header and footer template to the PDF generated by puppeteer, I am facing an issue where the CSS I added is not being fully applied. await page.pdf({ path: filePath, format : 'A4', printBackground : true, margin : { t ...

htmlcssnode.jspuppeteer

Retrieving HTML List Elements with IDs

If I have an unordered list in HTML with specific items, such as: <ul id="listid"> <li id=first>first element</li> <li id=second>second element</li> <li id=third>.....</li> </ul> How can I acces ...

javascripthtml

Best Practices for Implementing the 960 CSS Clear Class

I'm puzzled by the necessity of using the clear class in the 960 css framework. Every time I remove a div with the clear class, everything seems to function properly. Can you explain to me the significance and purpose behind this class? ...

cssframeworks960.gs

The menu appears with a gentle fade and smoothly descends into place

I am embarking on my first venture into creating an animated menu. Take a look at this image to see what I have in mind: The arrows serve as a visual representation of my desire for the names to drop down and fade in when the menu button is clicked. Addi ...

jqueryhtmlcss

Issue with the footer not remaining at the bottom of the page

I'm in the process of updating my website and have come across an issue with the footer placement on one specific page. Typically, the footer stays at the bottom of all pages except for this particular page where it appears floated to the left instead ...

htmlcss

Choose an option to modify the URL

I am trying to implement a select form element with values ranging from 1 to 7+. When the user selects "7+", I want the URL to redirect to emailForm.php. How can I achieve this functionality? The other options selected should be captured when the user clic ...

javascripthtmlformsselect

Personalizing Google Map pin

I found some code on Codepen to add pointers to a Google map. Currently, it's using default markers but I want to change them to my own. However, I'm not sure where in the code to make this update. Any examples or guidance would be appreciated. ...

javascriptcssgoogle-maps

Incorrect .offset().top calculation detected

Within a webpage, I have multiple sections. Positioned between the first and second section is a navbar menu. As the user scrolls down and the navbar reaches the top of the page, a function is triggered to fix it in place at the top. While this functionali ...

javascriptjqueryhtmlcss

The sticky footer seems to have lost its stickiness

I am facing an issue with the sticky footer on my website, as it doesn't stick properly and I'm struggling to find a solution. Here is the HTML code snippet: html.tpl.php <?php ?> <!DOCTYPE html> <head> <?php $head; ?> ...

htmlcssfootersticky

What is the best way to insert an image into an HTML card?

I'm a beginner in PHP and I'm working on creating a registration form that should have a design similar to the picture linked below: https://i.sstatic.net/7P7bn.png However, the form I've created so far looks like this: https://i.sstatic. ...

cssbootstrap-4