at the bottom of the page above footer

Question

I'm trying to put this <hr> and text at the bottom of the page, so once the page loads it will stay at the bottom of the page even if I open developer tools in the browser.

It looks like this:

My code is currently like this:

<div class="container body-content">
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year</p>
    </footer>
</div>

I've tried wrapping hr and footer in a div, giving it id and css style

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

but it causes <hr> to shrink from current width to the width of text date below it. If I add width: 100% in css, <hr> extends all the way to the right side of the screen, meanwhile I want it to be same as the current width. I've also tried giving wrapping <div> class="container" which almost do the job, but then it moves text a bit to the right, so it's not aligned with the text fields and submit button. How can I solve this?

Answer 1

HTML:

<div class="container">
    <div class="form">
        <h2>Login</h2>
        <input type="text" placeholder="email">
        <input type="text" placeholder="password">
        <button>Sign In</button>
    </div>

    <footer class="footer-width">
        <div class="inner">
        <p>&copy; @DateTime.Now.Year</p>
        </div>
    </footer>
</div>

CSS:

footer {
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
}

.inner {
    border-top: 1px solid black;
    width: 100%;
}

input {
    display: block;
    margin-bottom: 15px;
}

button {
    margin-bottom: 15px;
}

.container {
    width: 75%;
    margin: 0 auto;
}