Page positioned absolutely with a sticky footer

Introducing myself to those familiar with my previous query on the topic of Stick Footer (not sticking!), I am in search of guidance once again. Special thanks to Andres Ilich for shedding light on why my footer failed to adhere to the bottom of the page - due to the prevalent use of absolute positioning across my website.

Despite attempts to utilize floats and other techniques to maintain elements in the document flow while accommodating the footer's placement, I struggled due to my strict requirement for precision and reliance on absolute positioning.

If anyone could propose a solution that allows the footer to stick at the bottom without compromising my current positioning or suggest an effortless method to retain document flow while preserving the exactness of absolute positioning, I would greatly appreciate it.

For reference, here is the link to my site:

Although sharing my source code would be cumbersome and unrelated to the issue at hand, I encourage you to utilize the View Source function within your browser if necessary.

Thank you in advance for your assistance!

Sincerely, Novice Coder seeking direction.

csslayoutpositionsticky-footer

Answer №1

To achieve the desired outcome, the following changes should be made:

#wrapper {
  height: 100%; /* REMOVE THIS SECTION*/
}

.footer{
/*ADD THIS SECTION*/
position: fixed;
bottom: 0;
z-index: 9999;
/*REMOVE THIS*/
clear:both;
}

I highly recommend revising your CSS code. The current positioning setup is causing confusion.

Also, please note that the following are invalid properties:

position: float;
float: bottom;

The correct values for position are absolute, fixed, static, or relative.

As for float, it should be set to left, right, or none.

For further information, refer to this link and this link.

Answer №2

If you're looking for solutions for sticky footers, here are a couple of great options to consider. Personally, I prefer the second link:

Feel free to reach out if you need assistance with implementation. Hopefully, this information proves useful to you.

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

Allow the width of the container to be determined by the img element

To achieve the desired effect of making the image resolution width dictate the container width without stretching it, I am facing a challenge. Currently, when the text within a paragraph element exceeds the width of the image, the entire container expands. ...

css

`Can you provide some tips on keeping the MetroCSS label continuously visible?`

Within the input-control, there is a label: <div class="input-control modern text" data-role="input"> <input name="salle_lib" id="salle_lib" type="text" maxlength="70" placeholder="libell&eacute;" data-validate-func="required" data-valida ...

jquerycssmetro-ui-css

AngularJS search box functionality allows users to easily search through a

1 I am looking to develop a search box using AngularJS similar to the one shown in the image. While I am familiar with creating a normal text box, I am unsure of how to incorporate the search icon. Any guidance on how to achieve this would be greatly appr ...

css

Is it possible for someone to assist me in making my map stay in a fixed position?

How can I make sure that my map stays in a fixed position on the screen even when the user scrolls? Here is the code snippet I am using: #map { float: right; height: 545px; width: 40%; margin-top: 12px; margin-right: 30px; posit ...

css

Struggling with Duplicated Images

Currently working on a website using only HTML and CSS. I am still learning the ropes in this area. My goal is to create a layout with a header, body, and footer that repeat to fill up the entire page, similar to envato.com. Here is a snippet of the code I ...

csshtml

Styling just a single div when the state changes

I have a scenario where I am rendering 4 divs based on data fetched from my backend. Each div is colored according to a state change. While I have successfully implemented this, the issue is that all 4 divs can be colored in this way simultaneously. I want ...

javascripthtmlcssreactjsstate

Vertically aligning content within neighboring flexbox containers

I am facing an issue with stacking multiple items, such as cards, horizontally with equal height. While the cards are aligning stack-wise, the image and text within each card are not adjusting to the maximum height among the cards, causing misalignment. As ...

htmlcssflexbox

Changing the background color of a clicked checkbox can be done by using CSS

Currently, I am working on creating an exam page that features choices with checkboxes. My goal is to have the background of a selected choice change color. However, I am encountering some obstacles. To view the codes and screen, please click here Here i ...

javascripthtmlcssfrontend

Activate the dropdown menu when ul element is in focus

I am working on creating a dropdown navigation using pure CSS. I want the dropdown menu to appear when clicking on the ul. The issue I am facing is that simple ul:focus > ul does not seem to work, even though there is an anchor within it. However, the : ...

htmlcss

Centered on the screen are the input field and corresponding label

I am in the process of creating a signup form, and I have encountered an issue. How can I make the input wider without using a fixed width like width: 420px? Additionally, I would like to center both the input field and the label. I envision something simi ...

javascripthtmlcssreactjsforms

Choose the initial p tag that includes an image, based on the content of another div

I am trying to figure out how to manipulate the code on my website: <div class="the-post-thumbnail"> <img src="" alt="" width="" height="" /> </div> <div class="post-body"> <p><img src="" alt="" width="" height="" ...

javascriptjqueryhtmlcss

How can we ensure that an inline-block span inherits the text-decoration property from all of its ancestor elements?

I created an inline-block span inside u and s tags, hoping it would display with both strike-through and underline text decorations, but unfortunately, neither of them appeared. If I set its text-decoration to inherit, it will only inherit the text decora ...

css

Identifying rectangular shapes in an image and overlaying a div on top using Jquery

I am currently exploring the possibility of achieving the following: Imagine having an image within a div (serving as the background image). This image resembles an Excel sheet. My goal is to generate an input tag or contenteditable div when a user clicks ...

javascriptjqueryhtmlcss

Ways to conceal a div element when the JSON data does not contain a value

If the value in "desc" is empty, then hide <div24> and <popup-desc>. html <div class="popup"> <div class="popup-top" style="background-color: '+e.features[0].properties.fill+';"> ...

javascripthtmlcssjson

CSS Layout - Float: What's floating to the top?

Are there any CSS techniques available to make floated blocks fill in both upwards and in their float direction? For example - https://i.sstatic.net/uo06B.png Instead of - https://i.sstatic.net/oEijA.png I know this can be achieved using JavaScript li ...

csslayoutcss-float

What is the best way to prevent a jQuery hover event from adding a text-shadow to the CSS?

Currently, I am facing an issue with a jQuery event that triggers a text-shadow effect: $(".leftColumn").hover(function (){ $(".leftColumn h2").css("text-shadow", "0px 2px 3px rgba(0, 0, 0, 0.5)"); },function(){}); The problem arises when the text-shad ...

javascriptjqueryhtmlcss

Getting in formation without needing a table

Tables are not the way to go for alignment. How can I align this without using a table? I have several input fields, each with a label positioned to the left of it. I want all the input fields to be aligned on the left side. Below is a simple representati ...

htmlcssvertical-alignment

Transferring data from JavaScript to an HTML page

I'm currently developing a rock, paper, scissors game using HTML and JS. Here is the link to the complete code (CSS, JS, HTML): http://jsfiddle.net/fJw4R/. You can also view the game with images here: The functionality of the .math-module is working ...

javascripthtmlcss

What steps are needed to adjust a modal window so that it perfectly fits the size of the image it contains?

I am currently utilizing Bootstrap 4.2 to create a popup window (modal) featuring an image displayed at its real size (100%) in both width and height, provided that the browser window size permits. If the image surpasses the window dimensions, it should au ...

htmlcssbootstrap-4

A design featuring a two-column layout, with one column remaining static while the other

I just finished putting together a two-column layout. <div class="layout"> <div class="col1"></div> <div class="col2"></div> </div> Check it out here There are a couple of things I'm wondering about: Is t ...

htmlcss