Footer being covered by main content div

I've been exploring web design on my own after taking a web design class. I encountered an issue while working on setting up panels for my webpage, specifically with the footer.

When the main body div starts to fill up and reaches the footer, it goes under the footer instead of adjusting the webpage and pushing it down. Any suggestions on how to fix this?

Here is an image showing the div going under:

body,
html {
  background-color: #bee9e4;
  height: 100%;
  width: 100%;
}
.center {
  text-align: center;
}
#banner {
  background-color: lightgrey;
  background: linear-gradient(to right, #99ffcc, white, #99ffcc);
  border-style: groove;
}
#aboutme {
  border-style: groove;
  border-width: 2px;
  border-color: lightblue;
  box-shadow: 0px 2px 2px grey;
}
...
...
...
...
...
...
...
...
...
...
...
<div id="infoaboutme">
  <p>I am a Junior at //</p>
  <p>I like to learn at school.</p>
  <p>I love to spend time on the computer</p>
</div>

<br class="clearfloat">
...
...
...
...
...
...
...
...
...
...
...

Answer №1

Here is the root cause of the issue you're facing:

#footer {
    background-color: lightgrey;
    border-style: groove;
    overflow: auto;
    width: 100%;
    height: 75px;
    position: absolute;  /*  <--- REMOVES ELEMENT FROM NORMAL FLOW */
    bottom: 0;
    left: 0;
}

When you use absolute positioning on an element, it no longer follows the "normal flow" of the document. This means it does not take up any space in the document and other elements are not aware of its existence.

The reason your main content div is overlapping the footer is because the space where the footer should be is empty from the perspective of the content div. Before absolute positioning, the footer acted like a solid wall. But with absolute positioning, it becomes more like a cloud that other elements pass through.

To fully understand this behavior, you should familiarize yourself with two key concepts:

Answer №2

Visit the following link to see the output on Jsbin:

Link to Jsbin

Make the following updates to your CSS:

#footer {
    background-color: lightgrey;
    border-style: groove;
    overflow: auto;
    width: 100%;
    height: 75px;
}

Here is the modified CSS:

body,
html {
    margin: 0;
    padding: 0;
    background-color: #bee9e4;
    width: 100%;
}

.center {
    text-align: center;
}

/* Other CSS properties here */

#footer {
    background-color: lightgrey;
    border-style: groove;
    overflow: auto;
    width: 100%;
    height: 75px;
}

Click here to view the complete HTML code with CSS and JavaScript.

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

Nesting conditions within partials using Handlebars

Hey there! I'm having an issue with my page layout, here's what it looks like: --- title: Coffee replace: true --- {{> products-list-style}} So, my partial "products-list-style" is like this: {{#if ../replace}}Replace{{else}}Add to Cart{{/i ...

I encountered an issue while attempting to fetch table data, receiving the following error message: "Uncaught TypeError: result.rows.product is not a function at products.html:134."

https://i.sstatic.net/WZ5CC.pngHere is the HTML I have written <form> <br/> <label for="products1">Product Name:</label> <input type="text" name="pdt" id="pr ...

What's the best way to loop through each touch event property within the TouchList of a touch event using JavaScript?

I'm struggling to grasp touch events, as nothing seems to be working for me. For testing purposes, I've created a very basic page: HTML: <div id="TOUCHME"> TOUCH ME </div> <div id="OUTPUT"></div> Jav ...

What are alternative methods for creating a table layout without relying on traditional table elements?

Is there a way to eliminate tables from my code and achieve the same layout in the name of progress and learning? Here is an example of the table I currently have: <table cellspacing="0px"> <tr> <td> <img src= ...

Can you propose a different approach to creating the "word stack" that overcomes the limitations of my current method?

I am attempting to convert a set of two radio buttons into a stack of two labels, one blue and one gray, to represent the selected radio button and the unselected one. Clicking on this stack will toggle which label is blue (and consequently which radio but ...

Looking for solutions to manage mouseenter, mouseleave events and ensuring content dropdowns stay visible in Vue.js 2?

Hey there, I'm trying to figure out how to keep dropdown content from disappearing when using @mouseenter and @mouseleave. Here's what I have so far: <div class="wrapper"> <div class="link" @mouseenter="show = ...

scrolling malfunction

I encountered a problem with the scroll feature in this image: The problem is that I only want the vertical scroll to show up, not the horizontal scroll. I tried using the overflow:scroll attribute in my code. Will it display the same in Firefox and IE, o ...

Is Bootstrap causing columns to not change colors as expected?

I've been attempting to alter the colors of the column names, but they remain white. Here's an example: <div class="table-responsive"> <button id="exportButton" class="btn btn-primary">Button</butt ...

Interact with various contenteditable sections by navigating with the arrow keys

I have a challenge with multiple <p contenteditable="true"></p> elements on my page. I am seeking a solution to enable the use of arrow keys to navigate seamlessly across these separate elements as if they were one cohesive editable element. F ...

`Div Elements Overlapping`

Lately, I have been working on my personal portfolio and I encountered an issue with the contact form overlapping the footer. Can anyone provide some guidance on how to resolve this? Any help is greatly appreciated. https://i.stack.imgur.com/neIbs.gif ...

``There Seems to be an Issue with Loading Content in Tabs

Hey! I'm encountering an issue with my jquery tabs. The first tab content loads fine, but when I select another tab, the content doesn't display. Then, when I try to go back to the first tab, it doesn't load either. Here's the HTML cod ...

How can you determine the specific type of "display" utilized by CSS Bootstrap for a particular element?

When manipulating the "display" property of a bootstrap element like "row" or "col-md-3" using JavaScript, how can I determine the default value set by Bootstrap CSS? For instance, the Bootstrap source code likely sets the "display" value for the "row" cl ...

Ensure that the width of the table rows (tr) matches the width of the table header

I'm currently working on implementing a sticky table header. The issue I'm facing is that the width of tableHeaderRow does not match the width of tableHeader. Steps taken for creating sticky header: Make an Ajax call to populate the table with ...

What could be the reason behind CSS styles applying only when inserted within a style tag in my form, and not in the linked CSS file?

I want to express my gratitude for finding a solution to positioning Validator CallOuts on a web form through this question regarding repositioning the AJAX toolkit's CalloutExtender control. Does anyone know why applying CSS classes directly within ...

Eliminating unnecessary white space while utilizing the first-letter CSS property

Is there a way to remove the extra whitespace added under the first line when making the first letter of a paragraph bigger than the rest of the text? I already tried adjusting padding and margins on p::first-line without success. p{ line-height: 1.4; } p ...

There seems to be an issue with d3js bar charts as they are not displaying on the screen and there

Recently, I started delving into the world of D3js and decided to try my hand at creating some bar charts. However, despite my efforts, the bar charts failed to display on the screen. <!DOCTYPE HTML> <html> <head> <title> My D3 Pra ...

Attaching dynamic data to a specific element within an array

I have successfully created a demo where elements can be dropped into a specific area and their top and left values are displayed. I have also added functionality to remove dropped items and move them between different blocks. However, I am encountering so ...

Is it considered undesirable to have HTML source code all condensed into a single, uninterrupted line?

I have been thinking about my approach in my PHP CMS application. I currently capture most of the generated HTML into buffers and then flush their content at the appropriate location in the template page using my custom buffer class. Recently, I added a me ...

All images must be arranged to fit seamlessly side by side regardless of the screen size

I'm currently experimenting with creating a website dedicated to my favorite TV shows. Upon entering the site, you are greeted with the main page that includes 7 images. Each image is linked to a specific webpage providing information about the corre ...

What is the best way to conceal a title while still displaying the content with the use of *ngIf in Angular

Is there a way to hide the title "Title.PhoneInfo" without hiding the content? When I set the "IsTitleDisabled" property to true, both the title and content are hidden. I only want to hide the title. Is there a solution to achieve this? <form-layout-c ...