How to set footer to the bottom with semantic HTML?

Hey, my first post so sorry if it’s in the wrong place. I’m currently working through the full-stack developer course.
I’m stuck on the Making a website more responsive>Layout with flexbox>Tea Cozy project

This is my HTML(basically a header, section with 3 articles, footer). The problem I have is that I can’t get the footer to stick to the bottom no matter what, I must have googled for 2 hours and still cant figure it out. This is my biggest issue.

Also, could I also get some tips on semantics (i know i forgot to use figure and figcaption), is there anything else I’m doing wrong? Any insights are welcome. Thank you

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./main.css">
    <title>Tea Cozy</title>
</head>



<body>
    <header>
        <div><img src=".\img\img-tea-cozy-logo.png" alt="Tea Cozy logo" id="logo"></div>
        <div class="header-items">
            <a href="" class="button header-item">Mission</a>
            <a href="" class="button header-item">Featured Tea</a>
            <a href="" class="button header-item">Locations</a>
        </div>
    </header>

    <section>


        <article class="item" id="Our-Mission">
            <h2>Our Mission</h2>
            <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
        </article>


        <article class="item" id="Tea-Of-The-Month">
            <h2>Tea of the Month</h2>
            <h4>What's Steeping at The Tea Cozy?</h4>
            <div class="card-container">
                <div class="card">
                    <img src="./img/img-berryblitz.jpg" alt="">
                    Fall Berry Blitz Tea
                </div>
                <div class="card">
                    <img src="./img/img-spiced-rum.jpg" alt="">
                    Spiced Rum Tea
                </div>
                <div class="card">
                    <img src="./img/img-donut.jpg" alt="">
                    Seasonal Donuts
                </div>
                <div class="card">
                    <img src="./img/img-myrtle-ave.jpg" alt="">
                    Myrtle Ave Tea
                </div>
                <div class="card">
                    <img src="./img/img-bedford-bizarre.jpg" alt="">
                    Bedford Bizarre Tea
                </div>
            </div>

        </article>


        <article class="item" id="location-container">
            <h2>Locations</h2>
            <div class="location-card-container">
                <div class="location-card">
                    <h3>Downtown</h3>
                    <p>384 West 4th</p>
                    <p>Suite 108</p>
                    <p>Portland, Maine</p>
                </div>
                <div class="location-card">
                    <h3>East Bayside</h3>
                    <p>3433 Phisherman's Avenue</p>
                    <p>(Northwest Corner)</p>
                    <p>Portland, Maine</p>
                </div>

                <div class="location-card">
                    <h3>Oakdale</h3>
                    <p>515 Crescent Avenue</p>
                    <p>Second Floor</p>
                    <p>Portland, Maine</p>
                </div>
            </div>
        </article>

    </section>

    <footer>
        <div class="footer-contact">
            <h2>The Tea Cozy</h2>
            <h5>[email protected]</h5>
            <h5>917-555-8904</h5>
        </div>
        <p>copyright The Tea Cozy 2017</p>
    </footer>


</body>



</html>

This is my CSS:

html {
    scroll-padding-top: 69px;
}

* {
    font-family: Helvetica, sans-serif;
    /*import later */
    font-size: 22px;
    color: seashell;
    background-color: black;
    opacity: 0.9;
    box-sizing: border-box;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    text-align: center;
}

header {
    position: fixed;
    height: 69px;
    border-bottom: 1px solid seashell;
    display: flex;
    text-decoration: underline;
    width: 100%;
    z-index: 1;
}

#logo {
    height: 50px;
    margin: 10px 10px 10px 10px;
}

.header-items {
    display: flex;
    justify-content: flex-end;
    width: max-content;
    flex: 1 1 0%;
}

.header-item {
    margin-left: 1%;
    margin-right: 1%;
    display: flex;
    align-items: center;
}

body {
    align-items: center;
    display: flex;
    flex-direction: column;
}

section {
    align-self: center;
    top: 69px;
    display: flex;
    position: absolute;
    flex-direction: column;
}

.item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 35px;
    border: 2px dotted green;
}

#Our-Mission {
    background: url('./img/img-mission-background.jpg');
    height: 700px;
    width: 1200px;
}

.card-container {
    max-width: 1000px;
    min-width: 300px;
    display: inline-flex;
    flex-flow: row wrap;
    justify-content: space-between;
    border: 2px dotted red;
}

.card {
    display: inline-flex;
    flex-direction: column;
    margin: 15px 0 15px 0;

    border: 1px solid red;
}

.card img {
    width: 300px;
    height: 200px;
    margin: 0 0 10px 0;
}

#Tea-Of-The-Month {
    display: flex;
    justify-content: center;
}


#location-container {
    background: url('./img/img-locations-background.jpg');
    display: inline-flex;
    height: 500px;
    width: 1200px;
    justify-content: center;

}

#location-container h2 {
    margin-bottom: 15px;
}

.location-card-container {
    display: grid;
    grid-template-columns: 300px 300px 300px;
    column-gap: 40px;
    background-color: rgba(0, 0, 0, 0);
}

.location-card {
    height: 300px;
    width: 300px;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-around;
    background-color: black;
    opacity: 1;
}

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

I remember this project is pretty challenging - the key I think is to focus on flex and it’s associated attributes as something that needs to be set on the elements that you want to position.

You have your body set for flex so any elements inside the body that you want positioned should also be set to flex. I didn’t see the footer elements set to flex. So I’d try that and see what happens.

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.