The Tea Cozy Project <footer>

WebDevCourse_The Tea Cozy project

hello! everyone.
I got stuck to dealing with some css (positioning sections…)
the ideal positioning is make footer positioned at the very bottom of the web page.
but continuously it appears at the banner section which is within main section.

REALITY:

IDEAL IS ;;

i will share with my whole code…(im sorry since my code on github page doesn’t show up when i approached by url.
so sorry again for sharing whole codes here.

please if anyone can help me with how to manipulate position thank you

HTML

<header>
        <div class="logo"><img src="./img/img-tea-cozy-logo.png" alt=""></div>
        <nav>
            <ul>
                <li>Mission</li>
                <li>Featured Tea</li>
                <li>Locations</li>
            </ul>
        </nav>
    </header>
    <main>
        <div class="banner">
            <div class="mission">
                <h2>Our Mission</h2>
                <h4>Handpucked, Artisannally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
            </div>
        </div>
        <div class="container">
            <h2>Tea of the Month</h2>
            <h4>What's Steeping at The Tea Cozy?</h4>
            <div class="images">
                <div class='imagesWithCaption'>
                    <div class='image img1'> </div>
                    <h4>Fall Berry Biltz Tea</h4>
                </div>
                <div class='imagesWithCaption'>
                    <div class='image img2'></div>
                    <h4>Spiced Rum Tea Tea</h4>
                </div>
                <div class='imagesWithCaption'>
                    <div class='image img3'></div>
                    <h4>Seasonal Donuts</h4>
                </div>
                <div class='imagesWithCaption'>
                    <div class='image img4'></div>
                    <h4>Myrtle Ave Tea</h4>
                </div>
                <div class='imagesWithCaption'>
                    <div class='image img5'></div>
                    <h4>Bedford Bizarre Tea</h4>
                </div>
            </div>
        </div>
        <div class="locations">
            <h2>Location</h4>
            <div class="location-block">
                <div class='location'>
                    <h3>Downtown</h3>
                    <h4>384 West 4th St</h4>
                    <h4>Suite 108</h4>
                    <h4>Portland, Maine</h4>
                </div>
                <div class='location'>
                    <h3>East Bayside</h3>
                    <h4>3433 Phisherman's Avenue</h4>
                    <h4>(Northwest Corner)</h4>
                    <h4>Portland, Maine</h4>
                </div>
                <div class='location'>
                    <h3>Oakdale</h3>
                    <h4>515 Crescent Avenue</h4>
                    <h4>Second Floor</h4>
                    <h4>Portland, Maine</h4>
                </div>
            </div>
        </div>
        <div class="bottom-company-info">
                <h2>The Tea Cozy</h2>
                <h5>contact@theteacozy.com</h5>
                <h5>917-555-8904</h5>
        </div>
    </main>
    <footer>
        <h5>copyright The Tea Cozy 2017</h5>
    </footer>

AND HERE IS
CSS

html,
body {
    width: 100%;
    height: 100%;
}

body {
    margin: 0px;
    font-family: "Helvetica", sans-serif;
    font-size: 22px;
    color: seashell;
    background-color: black;
    opacity: 0.9;
    text-align: center;
  }

/* header section */
header {
    display: flex;
    width: 100%;
    height: 69px;
    position: fixed;
    top: 0;
    left: 0;
    border-bottom: 1px solid seashell;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
    background-color: black;
}
header .logo {
    margin-left: 10px;
    height: 50px;
}
header .logo img {
    height: 100%; 
    width: auto;
}
header li {
    list-style: none;
    display: inline-block;
    text-decoration: underline;
    justify-content: space-between;
}

/* main section */
    /* banenr section */
main {
    position: relative;
    width: 100%;
    top: 67px;
    padding-bottom: 30px;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
}
    main .banner {
        width: 1200px;
        height: 700px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: url(./img/img-mission-background.jpg);
    }
    main .banner .mission {
        width: 100%;
        color: seashell;
        background-color: black;
        z-index: 1;
    }
    main .banner  h2 {
        margin: 0 auto;       
    }
    /* content section */
    main .container {
        display: flex;
        flex-direction: column;
        position: relative;
        align-items: center;
    }
    main .container .images {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    main .container .images .imagesWithCaption {
        display: inline-flex;
        flex-direction: column;
    }
    main .container .images .image {
        width: 300px;
        height: 200px;
        margin: 0 10px;
    }
    .img1 {
        background-image: url(./img/img-berryblitz.jpg);
        background-size: cover;
    }
    .img2 {
        background-image: url(./img/img-spiced-rum.jpg);
        background-size: cover;
    }
    .img3 {
        background-image: url(./img/img-donut.jpg);
        background-size: cover;
    }
    .img4 {
        background-image: url(./img/img-myrtle-ave.jpg);
        background-size: cover;
    }
    .img5 {
        background-image: url(./img/img-bedford-bizarre.jpg);
        background-size: cover;
    }
    .imagesWithCaption h4 {
        margin-top: 10px;
    }
    /* locations section */
    main .locations {    
        background-image: url(./img/img-locations-background.jpg);
        background-size: cover;
        width: 1200px;
        height: 500px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; 
    }
    main .locations .location-block {
        display: flex;
        align-items: center;
        justify-content: center; 
    }
    main .locations .location-block .location {
        display: flex;
        flex-direction: column;
        background: black;
        opacity: 1;
        margin: 15px 50px;
        width: 300px;
    }
    /* company-info section */
    main .bottom-company-info {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 200px;
    }
/* footer section */
footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
}
footer h5 {
    margin-left: 20px;
}

THANK YOU FOR READING :slight_smile:

No, that’s perfectly fine, don’t worry :slight_smile:

So I looked at it quickly and got this:

Turns out that you don’t need to complicate things by trying to stick it at the bottom with an absolute positioning. You’ll want your footer relative to the rest of the content. Basically, a simple text-align: left will do. There’s also no need for a 200px height on your bottom-company-info, because the footer will naturally place itself below it.

It’s done! thank you for your help a lot!
the problem was default margin value exceed the height of parent container.
i changed it and it works now properly! thank you so much!

thank you for check my codes and give some guide.
btw…


THIS IS THE GUIDELINE FROM THE CHALLENGE and i tried to do like this.
that’s why i add 200 px of height.

and thank you for your help now my website looks more proper.
but still got problems… as below …

can you help me little more?

Happy to help, and well done on your project!


but still got problems… as below …

Like this?

I simply got rid of text-align: left and added some padding-top on the h5.

1 Like

oh… i found that i didn’t reply for your help!
thank you for help! :laughing:

my point was my footer is positioned in same Y with contact number…
and i want it to place it under the contact … but place in left side.

1 Like