Styling the footer to sit at the bottom of the page with a wider width, overlapping the content

I've encountered an issue where the footer of my webpage overlaps the content when the main content is long and users cannot scroll properly. Additionally, I've noticed that the width of the footer is larger than the header of the website.

Below is the CSS code I've used for the footer:

#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    font-size: 0.9em;
    padding: 2em;
    background-color: orange;
    border: 0.2em #4040ff;
    margin-bottom: 1em;
    border-style: solid;}

I have also attached a screenshot displaying the graphic problem for better understanding.

Thank you.

https://i.sstatic.net/2nUWL.jpg

csslayoutfooter

Answer №1

I have found that this method consistently yields great results:

html { height: 100%; }
body {
    min-height:100%; 
    position:relative; 
    padding-bottom:[footer-height] 
}
.footer { 
    position: absolute; 
    left: 0 ; right: 0; bottom: 0; 
    height:[footer-height] 
}

Answer №2

Check out this code snippet I wrote to help you resolve your issue

  html, body{ 
    height:100%;
    margin:0;
  }
  
  header {
    height: 30px;
    background-color: #000;
    color: #fff;
    padding: 20px;
    text-align:center;
  }
  
  footer{ 
    height: 30px;
    background-color: #000;
    color: #fff;
    padding: 20px;
    text-align:center;
    margin-top: auto; 
  }
  
  body{ 
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction:column; 
  }
  
   header p, footer p{
    margin: 5px 0px;
   }

  .container{
    text-align:center;
    padding: 20px;
  }
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<header>
    <p>This is header</p>
</header>

<div class="container">
    <p>This is body content</p>
</div>

<footer>
<p>This is footer</p>
</footer>

</body>
</html>

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

Issues with card flip functionality in Firefox

I designed this animation specifically for my website to create a unique effect. The animation involves translating on the Z-axis, making it appear as though the object is getting smaller, flipping to reveal the back of the card, and then translating back. ...

htmlangularcssangular5

`CSS3 animations utilizing keyframes and transformation`

Looking to replicate a similar effect using CSS animations: I've created a file working with keyframes for the animation, but it's not functioning as desired. My goal is to have the circles complete a full rotation on their axis, starting from ...

csscss-animationskeyframe

Strange formatting in the internet explorer browser (IE)

I have encountered an issue with CSS animation elements on the home page. The animations appear correctly in Google Chrome, but there is a strange indentation problem when viewed in IE. I have tried several solutions without success. Although I am not a w ...

htmlcssinternet-explorer

``I am experiencing difficulties with utilizing a personalized color scheme in React JS with Material

I'm currently working on customizing the color palette for my project, but I am only able to modify the main attribute and not others. My development environment is JavaScript with MUI, not Typescript. import './App.css'; import {BrowserRout ...

javascriptcssreactjsmaterial-ui

Scroll within the inner container

I am currently working on creating panels, each with a header and content. My goal is to allow scrolling only within the content area. Here is the CSS I have been using: .content-div{ float:left; height: 400px; overflow-x:hidden; overflow-y:hidden; ...

htmlcss

Changing the text color using jQuery is proving to be difficult for me

I've been trying to apply a styling condition using an if statement in my jQuery code based on the result from an API, but for some reason, I'm not seeing the color change. I have given an ID to try and change the color through CSS. $.getJSON(API ...

jquerycssapidombootstrap-5

As the browser window is resized, the gap between images widens while the images themselves decrease

Hey there, I'm encountering some trouble with the image links at the top of my page. As I resize the browser or change screen resolutions in media queries using percentages, the images are resizing accordingly. However, I'm noticing that as the i ...

htmlcssimagescalespace

Attempting to trigger the timer to begin counting down upon accessing the webpage

Take a look at this example I put together in a fiddle: https://jsfiddle.net/r5yj99bs/1/ I'm aiming to kickstart as soon as the page loads, while still providing the option to pause/resume. Is there a way to show the remaining time as '5 minute ...

javascriptjqueryhtmlcss

"Offspring div popping up beyond the bounds of its parent div

I've been working on a project where I need to insert a div containing an image into another div. The parent div already has two other child divs set up and functioning perfectly. Here is the HTML code for the parent and child divs: <div id="conte ...

htmlcss

Tips for creating gaps between wells within a Bootstrap row

Utilizing bootstrap, I am aiming to position two wells side by side without them being squeezed right next to each other. However, I am encountering some issues with achieving this. Here's the code snippet I am currently using: <div class="contai ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Implementing CSS Media Print, tables elegantly transition to a fresh page

I am encountering a challenge when it comes to printing my dynamic table along with some preceding text. It seems that sometimes the table begins on a new page, resulting in the header test being isolated on the first page and only displaying the table on ...

htmlcssprinting

Spinning an SVG path with CSS3 in a circular motion from its central axis

I have a collection of SVG paths, and one of them is displayed below: <path id="GOL" class="st0" d="M37.5,430.5l-12.4-12.4v-13.3h-4.2c-7.2,0-13.9,2.5-18.7,7.5c-4.7,4.9-7.3,11.3-7.3,18.3 c0,7,2.6,13.5,7.3,18.3c4.8,5,11.4,7.6,18.6,7.6l4.2,0v-13.7L36. ...

htmlcsssvgcss-animations

Incorporating a divider into a Material-UI MenuItem causes an additional border

I needed a way to separate the MUI MenuItem using a divider, but it resulted in an extra border around the item where the divider was placed. The highlighted section in the image shows the item that has the divider= true setting and the extra border. Is th ...

cssmaterial-uimenuitem

Obtaining a CHUNKY h1

After years of designing websites, one thing that continues to puzzle me is how people achieve that bold and THICK h1 effect. Take a look at this example - https://i.sstatic.net/xOJHn.png Even with a font weight of 700, it always seems too thin no matter ...

htmlcssbootstrap-4heading

Tips for Keeping Footer Aligned with Content:

When checking out this website, you may notice that the footer appears to be affixed to the left side. The CSS code responsible for this is as follows: #footer { width: 800px; clear:both; float:right; position:relative; left:-50%;} I would appreciate it ...

htmlcss

Resolving CSS Conflict in Panels with Legacy Bootstrap

I have recently implemented Panels from Bootstrap 3 with the older version of Twitter-Bootstrap. My challenge lies in adding the well class to the panel body, as it results in excessive padding. This was not an issue when using BS3, leading me to believe ...

csstwitter-bootstrap

Animating the maximum height causes a delay in the performance of other elements

Attempting to adjust the maximum height of a ul. When the max-height property changes (via toggling a class), the height shifts immediately, while the items below the ul maintain the animated height as expected. var expander = $('.skill-expand&apos ...

jquerycssanimationcss-transitions

Run various CSS animations repeatedly

I recently created a captivating text fade-in, fade-out animation consisting of four lines. Each line elegantly appears one after the other, creating a mesmerizing effect. However, there's now a request to have these animations run in an infinite loop ...

csscss-animations

Customize the text color across all sections of the application in ExtJS 6

I am looking to update the text color across my entire application. Currently, it's gray and I would like to change it to black. The platform I am working with is classic. I came across this code snippet in CSS: .x-body { margin: 0; -webkit-f ...

cssextjssassextjs6extjs6-classic

The calculator program fails to compute the width

My table has 4 columns with different widths: column 1: fixed width of 500px; column 2: calc(33% - 165px); column 3: calc(33% - 165px); column 4: calc(33% - 165px); Despite having the same value for the last 3 columns, their actual widths are different. ...

htmlcss