Creating a Fixed Footer with CSS

Another question on the same topic, with a twist. Despite trying various solutions found in countless articles, none seem to work for me. My familiarity with HTML/CSS is limited due to just a few months of off-and-on practice. Hence, I'm seeking help from someone knowledgeable who can guide me through this dilemma.

The blog layout I'm creating appears almost perfect except for the stubborn footer. It refuses to stick to the bottom. Instead, it hovers in the middle of the page's content. Ideally, I want a footer that anchors itself at the bottom and only displays when the content is minimal, akin to the layout seen on this website. Achieving this without resorting to 'position:fixed' has been my goal, but so far, I've hit roadblocks. As an amateur in web development, I feel lost in understanding what's going wrong.

I've included snippets of my current code, though they have been modified several times following different tutorials—none yielding the desired outcome.

If there are other errors or oversights unrelated to the sticky footer conundrum, experienced eyes spotting them would be immensely helpful in guiding me towards rectifying those mistakes. Any assistance provided will be greatly appreciated as I strive to learn the correct methods.

Thank you!

<body>
    <div id="outer">
        <div id="header">
            <div id="wrap">
                <div class="logo"><a href="#"><img src="images/logo.png" /></a></div>
            </div>
        </div>
        <div id="wrap">
            <div id="content">

                <div class="featured_title"><a href="#">Example Title One</a></div>
                ...

            </div>
        </div>
        <div id="wrap">
            <div id="sidebar">
                <div class="job_search">
                    <a href=#"><img src="images/job_search.png" /></a>
                </div>
                ...
            </div>
        </div>
        <div id="footer">
        
        </div>
    </div>
</body>

And here's the accompanying CSS:

html {
height:100%;
padding:0;
height:100%;
}

body {
margin: 0 0 40px;
background: #f4f4f4;
height:100%;
}


#wrap {
margin: 0 auto;
width: 940px;
}

/* Header */

...

/* Sidebar */
...
.job_search {
padding-bottom:20px;
}

/* Footer */

#footer {
clear:both;
bottom:0;
background:#000;
width:100%;
height:35px;
margin-top: -100px;
position:relative;
}

.footer_content {
font-family:helvetica, sans-serif;
color: #68acc2;
}

Answer №1

Give this a shot:

#footer{position:absolute; bottom:0;}

Answer №2

this is not the correct response

 <!--closing logo div--!> 

should be

<!-- end logo div -->

give this a try

<div id="wrapper">
    <div id="main" class="clearfix">
    </div>
 </div>

<div id="footer">
</div>

CSS styling

html, body, #wrapper{ height: 100%; }
body > #wrapper{height: auto; min-height: 100%;}
#main { padding-bottom: 150px; }  /*  same height as the footer */
#footer { 
        position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;} 

.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}

Answer №3

After encountering the same problem and spending countless hours troubleshooting, I finally managed to create a sticky footer solution that stays at the bottom of any window without overlapping any content. The best part is that it adjusts to different window sizes and stops at the end of the content seamlessly.

If you're struggling with a similar issue, feel free to check out my jsfiddle example:

http://jsfiddle.net/juroto/HL6Ad/

You can see how I implemented it and use the code for your own projects! :D

While reviewing your code, I noticed some areas that need attention. Fixing HTML tags, removing unnecessary </div> elements, and correcting CSS properties like adding a missing semicolon are crucial steps. It's essential to simplify your code and focus on getting the sticky footer working before reintegrating other components. You can start fresh with a basic structure and gradually build upon it once the footer is functioning correctly. Take a look at the simplified structure below for reference:

<!doctype html>

    <head>

        <title>INSERT TITLE</title>

        <style>
            body {
                margin: 0;
                padding: 0;
                height: 100%;
            }
            html {
                height: 100%;
                margin: 0;
                padding: 0;
            }
            * html #wrapper {
                height:100%; 
            }
            #wrapper {
                min-height: 100%;
                position: relative;
            }
            #content {
                padding-bottom: 30px; /* ATTENTION! padding-bottom should be equal to the footer height (this keeps the footer from overlapping the content) */
                font-size: 10em; /* ATTENTION! this font-size can be deleted or changed to whatever your heart desires*/
            }
            #footer {
                position: absolute;
                width: 100%;
                clear: both;
                bottom: 0;
                padding: 0;
                margin: 0;
                /* ATTENTION! The following elements below 
                can be set to whatever your heart desires */
                height: 30px; /* REMEMBER #footer height = #content padding-bottom */
                background: #333;
            }
        </style>

    </head>

    <body>
        <div id="wrapper">
            <div id="content">INSERT CONTENT HERE</div>
            <div id="footer"></div>
        </div>
    </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

The Bootstrap navigation bar is experiencing issues and is not functioning properly, as the classes are not

<nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" d ...

Getting rid of all CSS properties currently set for the Mobile view

Utilizing third-party library components in my project. The library includes components that come with predefined styles for mobile devices. I am seeking to completely UPDATE these properties within my own code. When I say "update," I mean removing all th ...

"Looking to spice up your website with a dynamic background-image

I've encountered a problem with my CSS code for the header's background image. Despite trying various methods to create a slideshow, nothing seems to be working. Can someone provide guidance? I have four banner images named banner1, banner2, bann ...

The resizing of images is limited to when the browser is refreshed for responsive

Hey there, I'm currently facing an issue with a responsive image gallery using jQuery cycle. If you want to check out my fiddle, here's the link - https://jsfiddle.net/qxyodctm/5/ <html>See jsfiddle</html> The problem occurs when t ...

What is the best way to ensure the content div fills all available space? (JQM compatibility concerns)

Currently, I am facing an issue with displaying a pdf in an iFrame within my app. The problem lies in the fact that the iFrame does not occupy the entire space between the header and footer divs on the page. I am utilizing Jquery Mobile 1.1.0 for the theme ...

Unable to retrieve input using jquery selector

I am attempting to detect the click event on a checkbox. The Xpath for the element provided by firebug is as follows, starting with a table tag in my JSP (i.e. the table is within a div). /html/body/div[1]/div/div/div[2]/div/div[2]/div[1]/div/div[2]/table ...

CSS grid layout for box alignment

I need the first two boxes to be positioned at the top with maximum width and the following two boxes to be placed at the bottom with the maximum width. Below are the CSS and HTML codes provided: CSS Code: /* Start Services */ .services { padding-top ...

Creating a Mobile-Friendly Centered Navigation Bar with Scroll Functionality Using Bootstrap 4 Alpha 6

Currently, I am working with the standard Bootstrap navbar that has the class="justify-content-center". My goal is to make this navbar scrollable when the elements do not have enough space. The issue I'm facing is that I can only scroll to the right a ...

What methods are available for generating a short-lived banner using JavaScript?

I recently entered this industry and am in the process of constructing a website. Utilizing HTML and CSS, I crafted a cookie notification banner. I am seeking guidance on how to ensure that it only appears once "every 24 hours for each user." I attempted ...

Following an update, Storybook is failing to apply JSX styles

After upgrading my project from NextJS 10 to NextJS 12, everything is functioning normally except for Storybook, which is now missing its styles. I utilize the styled-jsx library to create embedded css, implementing it in this way: const SearchResult = ({ ...

The TinyMCE extension in Yii fails to load CSS files when accessed through a subdomain

My Yii application located at site.com/module has the tinymce extension installed, but I am facing an issue where the tinymce CSS files are not loading when I access the application through the sub-domain alias module.site.com. Interestingly, all JS file ...

Refresh the current page with jQuery Mobile when it is clicked

I have a multi page template in jQuery Mobile. How can I refresh the current page when clicking on a hyperlink or button? I am using JQM version 1.4.5 Despite trying the code suggested in how to refresh(reload) page when click button in jQuery Mobile, it ...

Ways to identify when a person has scrolled a specific distance

Is it possible to modify the appearance of my top navigation bar once the page has been scrolled a specific number of pixels? I assume this requires some sort of listener to track the amount of scrolling. I came across element.scrollTop, but it doesn' ...

What is the best way to showcase a container within a two-column layout?

Looking to showcase the content of two columns exclusively within a container, with each column spaning the full width of the page, just like the image below. Can this be achieved using css grid? Your assistance and support is greatly appreciated. < ...

Can anyone explain why my inner div's display is set to block and it is being pushed down when its parent div has

Below is a sample of my HTML+CSS code: <div> <div class="first">text</div> <div>more text</div> </div> div { display: inline; } .first { display: block; } What's interesting is that when the first ...

Using jQuery to decrease the transparency of an image when the mouse hovers over it

I'm trying to set it up so that when you hover over an image, the opacity decreases by half. I know I must be making a simple mistake here, but I just can't figure out what it is. Any suggestions would be greatly appreciated. http://jsfiddle.net ...

Are web components capable of managing changes in CSS (maybe through cssChangedCallback)?

Is there a way to control the application of CSS to a web component similar to using attributes through attributeChangedCallback. I am currently developing a couple of web components that could benefit from being styled with CSS classes. However, I requir ...

Issue with loading function in FullCalendar React integration

Currently experimenting with FullCalendar v5 for React and exploring the Resource Timeline view feature. Facing an issue with the "loading" function - the idea is to monitor the state of FullCalendar and, if it's in a loading state, display a Spinner ...

The function getSelection().focusNode does not function properly within a specified ID

My current code allows for text to be bolded and unbolded using Window.getSelection(). I found the initial solution here: Bold/unbold selected text using Window.getSelection() It works perfectly without any issues. However, when I tried to modify the code ...

What is the best way to center text within a button when there is also an image present?

I'm trying to create a button with an image and some text, but I can't seem to get it aligned properly. Here's the code I have so far: <button><img src="https://www.google.com/s2/favicons?domain=google.com">&nbsp;Go ...