Footer is floating in middle of page despite CSS

May 21, 2022

I am fairly new to HTMl and CSS. I had my footer stuck to the bottom of the page no problem and then something changed and I cannot figure it out. When I go to a page without a lot of content the footer sits in the middle of the page. On pages with content, it works as it should. I have read countless other posts with the same issue and nothing seems to work. Using "position:fixed" makes the footer stuck to the bottom of the "viewport" not the page itself. Thus when I switch to another page with scrollable content, the footer shows itself behind the page content. I’ve tried adding "overflow:hidden", "bottom:0;", "left:0" and "right:0" to .main-footer and that doesn’t fix it. I don’t know what I’m missing. I have already spent a few hours looking up answers and trying to solve this issue.

*, *::before, *::after {
    box-sizing: border-box;
    font-family: 'Abel', sans-serif;
    color: #777;
}

body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Styles for navigation menus */
nav ul {
    margin: 0;
}

nav li{
    display: inline-block;   
}

nav a {
    display: inline-flex;
    padding: .5em;
    margin-top: 5px;
    margin-bottom: 5px;
    color: white;
    text-decoration: none;
    transition: 350ms;
}
nav a:hover {
    background-color: rgba(215, 200, 200, .3);
    border-radius: 2px;
}

/*Style for MAIN navigation menu*/
.main-nav {
    text-align: center;
    font-size: 1.1em;
    font-weight: lighter;
    border-bottom: 1px solid rgba(215, 200, 200, .3);
}

.main-nav li {
    padding: 0 5%;
}

.main-header {
    background-image: url('headerfooterimages/headerpicture.jpg');
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.5);
    background-blend-mode: multiply;
    padding-bottom: 25px;
    border-bottom: 1px solid black;
    
}

/* Style for Page Title/Logo */
.titleLogo {
    text-align: center;
    margin: auto;
    font-size: 4em;
    font-family: 'Bebas Neue';
    color: white;
}

.titleLogo-large {
    font-size: 6em;
}

/*Styles for sections of content on page*/
.content-section {
    margin: 1em;
    padding: 2em;
}

.content-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1.5em;
}

.section-header {
    font-family: Impact;
    font-weight: normal;
    color: rgb(34, 34, 34);
}

/*Styling the footer for each page*/
.main-footer {
    background-color: rgb(45, 45, 45);
    padding: 5px;
    position: relative;
    bottom: 0;
    width: 100vw;
    height: 75px;
    border-top: 1px solid black;
    margin: auto;
}

.footer-text {
    font-size: 25px;
    color: rgba(128, 128, 128);
    display: inline-flex;
}

.footer-text:hover {
    text-shadow: 0px 0px 40px rgba(255, 255, 255, 0.75);
    cursor: crosshair;
    color:rgb(188, 188, 188);
}

.main-footer-container {
    display: flex;
    align-items: center;
}

.main-footer-container ul {
    flex-grow: 1;
    text-align: end;
}
/*Styling the social media links in the footer*/
.footer-nav li {
    list-style: none;
    display: inline-flex;
    transition: 350ms;
}

.footer-nav img {
    border-radius: 5px;
    width: 30px;
    height: 30px;
}

.footer-nav li:hover {
    background-color: rgba(215, 200, 200, .3);
    border-radius: 5px;
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 3px;
}

/*Styling buttons across the whole site*/
.btn {
    background-color: #349aff;
    border: none;
    border-radius: 1em;
    color: white;
    padding: 8px 16px;
    vertical-align: middle;
    text-align: center;
    text-decoration: none;
    font-size: 8px;
    font-weight: bold;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}

.btn:hover {
    background-color: #2090ff;
    cursor: pointer;
    box-shadow: none;
}

/*Styling the cart menu option in the main navigation*/
.cart-container{
    display: inline-flex;
    margin: auto;
}

.cart-icon {
    float: left;
    clear: left;
    height: 25px;
}

.cart-text {
    display:inline-block;
    color: white;
    padding: 2px;
    margin-top: 1px;
}

.cart-text:hover {
    text-decoration: underline;
}

/*Styling shop items*/
.shop-item {
    display: block;
    margin: 50px;
}

.shop-item-image {
    display: block;
    margin: 10px;
    height: 200px;
}

.shop-item-title {
    display: block;
    text-align: center;
    width: 100%;
    font-weight: bold;
    font-size: 1.1em;
    color: #333;
    margin-bottom: 5px;
}

.shop-item-details {
    display: flex;
    align-items: center;
}

.shop-item-price {
    display: block;
    text-align: center;
    color: #333;
    width: 50%;
}

.shop-item-button {
    display: block;
}

.shop-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

/*Styling the image carousel*/
.carousel {
    width: 600px;
    height: 400px;
    position: relative;
    display: flex;
}

.carousel > ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

.carousel-container {
    margin: auto;
    align-items: center;
}

/*Styling the buttons on the carousel*/
.carousel-button {
    position: absolute;
    padding: 0 .25rem;
    z-index: 2;
    background: none;
    background-color: rgba(0, 0, 0, .1);
    border: none;
    border-radius: .25rem;
    font-size: 2.5rem;
    top: 50%;
    transform: translateY(-120%);
    color: rgba(255, 255, 255, .5);
    cursor: pointer;
    

}

.carousel-button:hover, .carousel-button:focus {
    color: white;
    background-color: rgba(0, 0, 0, .2);
}

.carousel-button:focus {
    outline: 1px solid black;
}

.carousel-button.prev {
    left: 1rem;
}

.carousel-button.next {
    right: 12rem;
}

/*Styling and formatting the next image effect for the image carousel*/
.slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    object-fit: fill;
    transition: 400ms opacity ease-in-out;
    transition-delay: 200ms;
    
}

.slide > img {
    display: inline-block;
    width: 70%;
    height: 80%;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);
}

.slide[data-active] {
    opacity: 1;
    z-index: 1;
    transition-delay: 0ms;
}

<!DOCTYPE html>
<html lang = "enUS">

    <head>

        <title>Modern Style</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta charset="utf-8">
            <link rel="preconnect" href="https://fonts.googleapis.com">
            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
            <link href="https://fonts.googleapis.com/css2?family=Abel&family=Bebas+Neue" rel="stylesheet">
            <link rel="favicon" href="favicon.ico">
            <link rel="stylesheet" href="stylesheet.css">
            <script src="script.js" defer></script>

    </head>

    <body>

        <header class="main-header">
                <nav class="nav main-nav">
                    <ul>
                        <li><a href="index.html">HOME</a></li>
                        <li><a href="about.html">ABOUT</a></li>
                        <li><a href="store.html">STORE</a></li>
                        <li class="cart-container"><a href="cart.html"><img class="cart-icon" src="headerfooterimages/cart.png" alt="A shopping cart icon">
                            <div class="cart-text">Shopping Cart</div></a></li>
                    </ul>
                </nav>

            <h1 class="titleLogo titleLogo-large">Modern Style Website</h1>
        </header>

        <section class="content-section content-container">
            <h2 class="section-header">ABOUT</h2>
            <p>
                This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text. 
                This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text. 
                This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text. 
                This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text. 
                This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text. 
                This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text. 
            </p>
        </section>

    </body>

    <footer class="main-footer">
        <div class="main-footer-container">
            <h2 class="footer-text">Modern Style Website</h2>
            <ul class="nav footer-nav">
                <li><a href="https://www.Facebook.com" target="_blank" alt="Link to Facebookcom"><img src="headerfooterimages/Facebook-Logo.png"></a></li>
                <li><a href="https://www.Instagram.com" target="_blank" alt="Link to Instagram.com"><img src="headerfooterimages/Instagram-Logo.png"></a></li>
                <li><a href="https://www.Twitter.com" target="_blank" alt="Link to Twitter.com"><img src="headerfooterimages/Twitter-Logo.png"></a></li>
            </ul>
        </div>
    </footer>

</html>

>Solution :

Seeing as you have declared the body to be 100vh, you can utilize this empty space with margin-top: auto.

On main-footer, remove margin: auto and replace it with margin-top: auto. This way, it will convert the remaining space on the body element into a margin-top-value for the main-footer element.

On another note,

make sure to include the <footer>-element BEFORE your closing </body>-tag, the footer is supposed to be inside the <body>-element.

Also, in your CSS reset, I would consider adding margin: 0; to avoid white bars on your site.

Codepen (because the code snippet is so long): https://codepen.io/sigurdmazanti/pen/ZErJzEK

.main-footer {
    background-color: rgb(45, 45, 45);
    padding: 5px;
    position: relative;
    bottom: 0;
    width: 100vw;
    height: 75px;
    border-top: 1px solid black;
    /*margin: auto;*/
    margin-top: auto;
}