I’m trying to clone the Google homepage and I designed the footer using Foxbox, but now I can’t put it at the bottom of the page. How can I fix this or is there any other technique to deal with this problem?

Here is a screenshot of the page and the code. I know it’s dirty and lacks design. At first I just want to fix the structure.

Screenshot of the page

```html
<body>
    <div class="heading">
        <div></div>
        <div class="gmail">
            <p>Gmail</p>
        </div>
        <div class="images">
            <p>images</p>
        </div>
        <div class="gapps">
            <button></button>
        </div>
        <div class="dp">
            <p>dp</p>
        </div>
    </div>

    <div class="container">
        <div class="google-logo">
            <img
                src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
                alt="Google logo"
            />
        </div>
        <div class="search-bar">
            <input
                type="search"
                name="q"
                aria-label="Search through site content"
            />
        </div>
        <div class="search-buttons">
            <div class="search-button">
                <button>Google Search</button>
            </div>
            <div class="feeling-lucky">
                <button>I'm Feeling Lucky</button>
            </div>
        </div>
    </div>

    <div class="footer">
        <div class="srilanka">
            <p>Sri Lanka</p>
        </div>
        <div class="footer-bottom">
            <div class="footer-bottom-left">
                <div class="about">
                    <p>About</p>
                </div>
                <div class="advertising">
                    <p>Advertising</p>
                </div>
                <div class="business">
                    <p>Business</p>
                </div>
                <div class="how-search-works">
                    <p>How Search Works</p>
                </div>
            </div>
            <div class="footer-bottom-right">
                <div class="privacy">
                    <p>Privacy</p>
                </div>
                <div class="terms">
                    <p>Terms</p>
                </div>
                <div class="settings">
                    <p>Settings</p>
                </div>
            </div>
        </div>
    </div>
</body>
```

```css

body {
    height: 100%;
}

body {
    font-size: 14px;
    font-family: arial, sans-serif;
    color: #222;
}

.heading {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 100px;
}

.gmail {
    padding: 0 15px;
}

.images {
    padding: 0 15px;
}

.gapps {
    padding: 0 15px;
}

.dp {
    padding: 0 15px;
}

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

.google-logo {
    padding-bottom: 3vh;
}

.search-bar {
    padding-bottom: 3vh;
}

.search-buttons {
    display: flex;
    justify-content: center;
}

.feeling-lucky {
    padding-left: 2vh;
}

.footer {
    display: flex;
    flex-direction: column;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.footer-bottom-left {
    display: flex;
}

.srilanka {
    padding: 0 15px;
}

.about {
    padding: 0 15px;
}

.advertising {
    padding: 0 15px;
}

.business {
    padding: 0 15px;
}

.how-search-works {
    padding: 0 15px;
}

.privacy {
    padding: 0 15px;
}

.terms {
    padding: 0 15px;
}

.settings {
    padding: 0 15px;
}

.footer-bottom-right {
    display: flex;
    justify-items: flex-end;
}


```

1

It’s best to post your code, not just a screenshot. You can use the following code on your footer and it will stay at the bottom of your page

    footer{
    position:fixed;
    bottom: 0
width: 100%
    }

2