Persistent Footer and Internet Explorer Compatibility

I'm facing an issue where my sticky footer doesn't stick to the bottom when there's a floating element in my content. Instead, it sits at the end of the non-floated content.

My goal is to have the footer at the bottom of the page window if the content doesn't fill the entire page, and at the bottom of the content when it exceeds a single page height.

Below is the code I'm using:


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8>
    <link rel="stylesheet" type="text/css" href="sticky.css"/>
    <title>Sticky Footer Test</title>
</head>

<body>

<nav>
    <div id="wrap">
        <p class="navbargreen">Green Navigation Bar</p>
    </div>
</nav>

<main>
    <div id="wrap">
        <p class="redtext">Lorem ipsum</p>
        <div id="box1">Floater 1</div>
    </div>
</main>

<footer>footer</footer>

</body>

</html>

CSS:

html {
position: relative;
min-height: 100%;
}

body {
margin: 0 0 100px; /* bottom = footer height */
}

main {
position: relative;
min-height: 100%;
}

#wrap {
margin: 0 auto;
width: 960px;
height: auto;
min-height: 100%;
padding: 0;
background-color: yellow;
}

.navbargreen {
height: 30px;
width: 960px;
background-color: greenyellow;
}

.redtext {
background-color: red;
height: 3000px;
}

#box1 {
float: left;
height: 400px;
width: 300px;
background-color: orange;
}

footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
background-color: purple;
}

I've been struggling with this issue for a while now!

I've searched, experimented, and tried various solutions with this test page, but I just can't seem to figure it out. It's frustrating!

I have a feeling that it's related to the floating elements, but I can't seem to crack it!

Answer №1

VANILLA

http://jsfiddle.net/azkgblhx/12/

* {
  padding: 0;
}
html, body {
  width: 100%;
}

.container {
  min-width: 100%;
  /* matches header width */
  margin-top: -50px; 
}
.container:after {
  content: "";
  display: inline;
}
.header, .container:after {
  width: 50px; 
}
.header {
  background: blue;
}

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

The "Open in new tab" feature seems to be missing for links when using Safari on iOS

My webapp contains links structured like this: <a href="/articles/">Articles</a> I am using JavaScript to control these links within my app: $(document).on("click", 'a', function(ev) { ev.preventDefault(); ev.stopPropagat ...

HTML: Accept only images in PNG, GIF, and JPG format for file upload

How can I customize the HTML upload dialog window to only show JPG, GIF, and PNG files when users upload an image? ...

Encountered an issue when attempting to send data using this.http.post in Angular from the client's perspective

Attempting to transfer data to a MySQL database using Angular on the client-side and Express JS on the server-side. The post function on the server side works when tested with Postman. Here is the code snippet: app.use(bodyParser.json()); app.use(bodyPa ...

"Easily toggle the visibility of values in checkboxes and organize them into groups with the power of JavaScript

Hey there! I am currently working on a project that involves grouping checkboxes and hiding/unhiding their content based on user interaction. Essentially, when the page first loads, the "All CARS" checkbox will be checked by default. If I then check the "C ...

Achieving a child div to occupy the entire available space when the parent is specified as `mx-auto` can be accomplished using Vue and Tailwind CSS

Sorry if this seems like a basic question, I'm still getting the hang of Vue and tailwind. In my parent template, it looks like this: <template> <div class="mx-auto mt-4 max-w-3xl"> <slot></slot> </div> ...

Challenges with adjusting the value of HTML range inputs

Within my HTML, I have incorporated the following three elements: <button id="left" >Previous</button> <input id="animSlider" type="range" min="0" max="0" step="1" value="0" /> //THE MAX VALUE IS SET DYNAMICALLY UPON PAGE LOAD, NOT AS ZE ...

Ensure the browser stays anchored at the bottom of the page while employing jQuery to reveal a div

This piece of code allows me to toggle the visibility of a div: <a href="#" class="show_hide">Show/hide</a> <div class="slidingDiv"> My content...... <a href="#" class="show_hide">hide</a></div> <script src="http:// ...

Creating a component that surpasses all others

I have a code snippet that contains styling information for two div elements. How can I ensure that my <div id="home"> appears below my <div id="navigate"? Any suggestions? #home { background-color: black; color: grey; text-align: c ...

Issues arise with table-cell and table-row when implementing a navigation bar using the CSS table-layout property

Looking to create a dynamic navigation bar that adjusts to different screen sizes? On the left side, you want an undetermined number of links, while on the right side there should be a search button. The challenge is to ensure that all links have equal wi ...

Oops! Looks like the module "@google-cloud/vision" hasn't been loaded in this context yet. Make sure to use require([]) to load it before proceeding

Encountering an issue with the error message Module name "@google-cloud/vision" has not been loaded yet for context: _. Use require([]) while running my project. I have included require.js in my project and added the script tag in my HTML file <script d ...

The strategy of magnifying and shrinking graphs on Google Finance for better analysis and

I am seeking to understand the logic behind a zoom-able graph similar to the one on Google Finance. I am aware that there are pre-made components available, but I am interested in a simple example that breaks down the underlying logic. ...

Utilizing Angular's DomSanitizer to safely bypass security scripts

Exploring the capabilities of Angular's bypassSecurityTrust* functions has been a recent focus of mine. My objective is to have a script tag successfully execute on the current page. However, I keep encountering issues where the content gets sanitized ...

How come the width of an element with a relative position remains maximized even when it does not have any child elements?

I am facing an issue with a "message" element that needs to be resized if the text exceeds its width within certain limits, similar to how it works in messaging applications. .message { position: relative; color: white; background: #182533 ...

Struggling to create a complete Absolute URL

www.baxter.com source page reveals that many of the href links start with the word baxter, for example: href="/baxter/corporate.page?">About Baxter< Attempting to construct an absolute URL by combining the base url, www.baxter.com, with the relativ ...

What is the process for loading the chosen option JSON object from an array when a button is clicked?

I have a TypeScript file containing JSON objects that can be selected as options from a dropdown list. I am looking for guidance on how to load/instantiate the selected JSON object when the user clicks a button to proceed. Specifically, I would like to le ...

Would it be possible to use a script to convert the y-axis values of the chart into Arabic numerals?

Currently, I am working on creating line and pie charts, but I need the Y-axis to display Arabic language. $('button').on('click', function(e) { $('#pie-chart3').empty(); var type = $(this).d ...

Display the query results on a separate blade

In my original attempt, I intended to display the results in a modal but later decided to show them in a different blade. My goal is to fetch all comments related to a post using its post_id. However, I encountered the following error: The GET method is no ...

Differentiating font sizes for headings (h1-h6) based on Bootstrap breakpoints

Is there a way to utilize bootstrap's font size breakpoints (sm, md, lg, xl, etc.) for the various font sizes provided by bootstrap: <p class="fs-1">.fs-1 text</p> <p class="fs-2">.fs-2 text</p> <p class= ...

Here's how you can combine two individual LESS files using grunt-recess

Hey there! I'm working on compiling 2 separate files using grunt recess: recess: { dist: { options: { compile: true }, files: { 'path/css/custom. ...

Is there a way to split the text into distinct pages within a contenteditable area, similar to the functionality in Google Docs

I've been working on developing a specialized browser-based text editor and I've encountered a puzzling question. How can I detect and split long texts into separate pages, similar to how Google Docs handles pagination? I'm aware that Google ...