How to make Footer go to the bottom?

Question

I am currently trying to solve this issue of making my footer bar stay at the bottom. However, I am now unable to do so as I am unsure what I am doing wrong that is not doing work as intended.

I have tried multiple problems and solutions but to no avail, there is no progress at all.

HTMl Code:

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="Class.css">
</head>

<body>
    <nav>
        <div class="logo">Revolutionary Fitness</div>
        <ul>
            <div class="items">
                <li><a href="#">Home</a></li>
                <li><a href="#">Membership</a></li>
                <li><a href="#">Classes</a></li>
                <li><a href="shop.html">Products</a></li>
                <li><a href="login.php">Login</a></li>
            </div>
        </ul>
    </nav>

    <div class="background">
        <div class="overlay">
            <h3>Classes</h3>
            <p>Test</p>
        </div>
    </div>

    <div class="main">
        <h1>Classes, coaches and community</h1>
        <div class="text">
            <p>At Virgin Active, we do health and fitness differently.
                We have expertly crafted exercise experiences that are the perfect blend of intelligent programming and feel-good movement.
                We've got everything from Yoga to HIIT, so you can move your body any way you want.
            </p>
        </div>
    </div>

    <div class="section">
        <img src="Yoga.jpg" alt="Yoga">
        <div class="ClassText">
            <h1>Yoga</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro ut officiis excepturi voluptatem voluptates fuga, odit ad eaque, sint dignissimos error laborum ea velit. Quam facilis enim commodi fuga earum est cum deleniti eligendi? Minus,
                velit voluptate odit perferendis ex excepturi sed
                quisquam earum mollitia est quasi vitae. Ipsa, saepe!
            </p>
        </div>
    </div>

    <div class="section2">
        <div class="ClassText">
            <h1>Yoga</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro ut officiis excepturi voluptatem voluptates fuga, odit ad eaque, sint dignissimos error laborum ea velit. Quam facilis enim commodi fuga earum est cum deleniti eligendi? Minus,
                velit voluptate odit perferendis ex excepturi sed
                quisquam earum mollitia est quasi vitae. Ipsa, saepe!
            </p>
        </div>
        <img src="Yoga.jpg" alt="Yoga">
    </div>

    <div class="section3">
        <div class="ClassText">
            <h1>Yoga</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro ut officiis excepturi voluptatem voluptates fuga, odit ad eaque, sint dignissimos error laborum ea velit. Quam facilis enim commodi fuga earum est cum deleniti eligendi? Minus,
                velit voluptate odit perferendis ex excepturi sed
                quisquam earum mollitia est quasi vitae. Ipsa, saepe!
            </p>
        </div>
        <img src="Yoga.jpg" alt="Yoga">
    </div>

    <div class="section4">
        <div class="ClassText">
            <h1>Yoga</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro ut officiis excepturi voluptatem voluptates fuga, odit ad eaque, sint dignissimos error laborum ea velit. Quam facilis enim commodi fuga earum est cum deleniti eligendi? Minus,
                velit voluptate odit perferendis ex excepturi sed
                quisquam earum mollitia est quasi vitae. Ipsa, saepe!
            </p>
        </div>
        <img src="Yoga.jpg" alt="Yoga">
    </div>


    <footer class="footer">
        <div class="social">
            <a href="#"><i class="fab fa-facebook-f"></i></a>
            <a href="#"><i class="fab fa-whatsapp"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-instagram"></i></a>
        </div>
        <ul class="list">
            <li><a href="about.html">About Us</a></li>
            <li><a href="Contact.php">Contact Us</a></li>
            <li><a href="faq.html">FAQs</a></li>
        </ul>
        <p class="copyright">
            <small>&copy;2022 Revolutionary Fitness</small>
        </p>
    </footer>
</body>

</html>

Css Code:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
nav{
    background: #1b1b1b;
}
nav:after{
    content: '';
    clear: both;
    display: table;
}
nav .logo{
    float: left;
    color: white;
    font-size: 27px;
    font-weight: bold;
    line-height: 70px;
    padding-left: 60px;
}
nav ul{
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    float: right;
    margin-right: 40px;
}
nav ul li{
    display: inline-block;
    background: #1b1b1b;
    margin: 0 5px;
}
nav ul li a{
    color: white;
    text-decoration: none;
    line-height: 70px;
    font-size: 18px;
    padding: 8px 15px;
}
nav ul li a:hover{
    color: cyan;
}
nav ul ul li a:hover{
    color: cyan;
    box-shadow: none;
}
nav ul ul{
    position: absolute;
    top: 90px;
    opacity: 0;
    visibility: hidden;
    transition: top .3s;
}
@media screen and (max-width:968px){
    nav .logo{
        display: none;
    }
    nav ul div.items{
        flex: 3;
    }
}
.background{
    background-color: #212529;
    width: 100%;
    height: 200px;
    position: relative;
}
.overlay{
    width: 100%;
    height: 100%;
    color: white;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: relative;
    left: -30%;   
}
.overlay h3{
    margin-bottom: 20px;
    color: crimson;
    font-size: 20px;
}
.overlay p{
    font-size: 35px;
}
.main h1{
    display: flex;
    text-align: center;
    justify-content: center;
    margin-top: 20px;
    font-size: 50px;
}
.text{
    width: 50%;
    height: 50px;
    padding-top: 20px;
    white-space: initial;
    margin: 0 auto;
    word-wrap: break-word;
}

body{
    margin: 0;
    font-family: sans-serif;
}
.section{
    background-color: #F5F5F5;
    display: flex;
    justify-content: space-between;
    padding: 40px;
    width: 80%;
    margin-top: 50px;
    float: left;
}
.section img{
    height: 250px;
}
.section h1{
    margin-left: 100px;
    color: black;
}
.section p{
    color: grey;
    margin-right: 15px;
}

.section2{
    background-color: #F5F5F5;
    display: flex;
    justify-content: space-between;
    padding: 40px;
    width: 80%;
    margin-top: 50px;
    float: right;
}
.section2 img{
    height: 250px;
}
.section2 h1{
    margin-left: 100px;
    color: black;
}
.section2 p{
    color: grey;
    margin-right: 15px;
}
.section3{
    background-color: #F5F5F5;
    display: flex;
    justify-content: space-between;
    padding: 40px;
    width: 80%;
    margin-top: 50px;
    float: left;
}
.section3 img{
    height: 250px;
}
.section3 h1{
    margin-left: 100px;
    color: black;
}
.section3 p{
    color: grey;
    margin-right: 15px;
}
.section4{
    background-color: #F5F5F5;
    display: flex;
    justify-content: space-between;
    padding: 40px;
    width: 80%;
    margin-top: 50px;
    float: right;
}
.section4 img{
    height: 250px;
}
.section4 h1{
    margin-left: 100px;
    color: black;
}
.section4 p{
    color: grey;
    margin-right: 15px;
}


.footer{
    background-color: #000;
    padding: 40px;
}
.footer .social{
    text-align: center;
    padding-bottom: 25px;
    color:#4b4c4d;
}
.footer .social a{
    display: inline-block;
    height: 40px;
    width: 40px;
    background: #424242;
    margin: 0 10px 10px 0;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    color:#ffffff;
    transition: all 0.5s ease;
}
.footer .social a:hover{
    color:#24262b;
    background-color: #ffffff;
}
.footer ul{
    margin-top: 0;
    padding: 0;
    list-style: none;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 0;
    text-align: center;
}
.footer ul li a{
    color:#fff;
    text-decoration: none;
}
.footer ul li{
    display: inline-block;
    padding: 0 15px;
}
.footer .copyright{
    margin-top: 15px;
    text-align: center;
    font-size: 20px;
    color:#fff;
}

https://stackoverflow.com/search?q=footer+bottom – j08691 Aug 11 '22 at 16:57 — j08691, Aug 11 '22 at 16:57

score 0 · Answer 1 · answered Aug 11 '22 at 17:03

0

Adding this to your footer should help

clear: both;

The problem is that you're floating the sections above and not clearing them later.

I would recommend avoiding floats for layout. Use Flexbox or Grid instead.

answered Aug 11 '22 at 17:03

Nver Khachoyan

46
4

score 0 · Answer 2 · answered Aug 11 '22 at 17:05

0

I suggest you apply a display flex in the body and flex direction column, or even create a div within the body that have all the divs, and then you apply a class with display flex and flex-direction column. I hope it works

answered Aug 11 '22 at 17:05

lkminzoni

49
4

How to make Footer go to the bottom?

2 Answers2