Footer not at the bottom of the whole pages
up vote
0
down vote
favorite
as shown in the image above, my Footer get loads at the 100% width but it is not at the most bottom of the page, I am new to HTML/CSS, so I've been figuring for an hour, but still can't fix it, the form is overextended from the page view so when I scroll down to the bottom, the spacing after the Sign Up button is also very little... how can I fix this?
Here are the sample of my code
.center-page {
width: 400px;
height: 400px;
position: absolute;
top: -40px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.footer-pos {
width: auto;
height: auto;
position: absolute;
top: 860px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div>
<div class=navbar>
NAVBAR CONTENTS
</div>
<div class="center-page">
ALL MY "label" and ASP "input" and Sign Up "button"
</div>
</div>
<div>
<footer class="footer-pos">
<div> © 2018 Copyright: HRCA </div>
</footer>
</div>
I am using bootstrap 4.1.3 (bootstrap.min.css) and here are my custom CSS code for the content(center-page) and my footer
html css
|
show 5 more comments
up vote
0
down vote
favorite
as shown in the image above, my Footer get loads at the 100% width but it is not at the most bottom of the page, I am new to HTML/CSS, so I've been figuring for an hour, but still can't fix it, the form is overextended from the page view so when I scroll down to the bottom, the spacing after the Sign Up button is also very little... how can I fix this?
Here are the sample of my code
.center-page {
width: 400px;
height: 400px;
position: absolute;
top: -40px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.footer-pos {
width: auto;
height: auto;
position: absolute;
top: 860px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div>
<div class=navbar>
NAVBAR CONTENTS
</div>
<div class="center-page">
ALL MY "label" and ASP "input" and Sign Up "button"
</div>
</div>
<div>
<footer class="footer-pos">
<div> © 2018 Copyright: HRCA </div>
</footer>
</div>
I am using bootstrap 4.1.3 (bootstrap.min.css) and here are my custom CSS code for the content(center-page) and my footer
html css
You need to use the column system in Bootstrap and stop using absolute positioning.
– rpm192
Nov 7 at 13:38
position: absolute
works relative to a parent div, tryposition: fixed
to make it relative to the viewport
– arieljuod
Nov 7 at 13:40
1
I would stop using absolute positioning until you know how to use it properly, instead use flex for this as it will be simpler and easier to understand - I have several different approaches to a sticky footer as outlined in my answer here: stackoverflow.com/questions/23651942/…
– Pete
Nov 7 at 13:41
Or use bootstraps sticky footer template: getbootstrap.com/docs/4.1/examples/sticky-footer-navbar
– Pete
Nov 7 at 13:59
hi @Pete , I am not looking for a sticky footer, I want it to be just at the bottom of the page, not the type that go with you when scrolling, on a side note, i tried position:fixed, it is block my content when I had scrolled down
– Elvis
Nov 7 at 14:05
|
show 5 more comments
up vote
0
down vote
favorite
up vote
0
down vote
favorite
as shown in the image above, my Footer get loads at the 100% width but it is not at the most bottom of the page, I am new to HTML/CSS, so I've been figuring for an hour, but still can't fix it, the form is overextended from the page view so when I scroll down to the bottom, the spacing after the Sign Up button is also very little... how can I fix this?
Here are the sample of my code
.center-page {
width: 400px;
height: 400px;
position: absolute;
top: -40px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.footer-pos {
width: auto;
height: auto;
position: absolute;
top: 860px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div>
<div class=navbar>
NAVBAR CONTENTS
</div>
<div class="center-page">
ALL MY "label" and ASP "input" and Sign Up "button"
</div>
</div>
<div>
<footer class="footer-pos">
<div> © 2018 Copyright: HRCA </div>
</footer>
</div>
I am using bootstrap 4.1.3 (bootstrap.min.css) and here are my custom CSS code for the content(center-page) and my footer
html css
as shown in the image above, my Footer get loads at the 100% width but it is not at the most bottom of the page, I am new to HTML/CSS, so I've been figuring for an hour, but still can't fix it, the form is overextended from the page view so when I scroll down to the bottom, the spacing after the Sign Up button is also very little... how can I fix this?
Here are the sample of my code
.center-page {
width: 400px;
height: 400px;
position: absolute;
top: -40px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.footer-pos {
width: auto;
height: auto;
position: absolute;
top: 860px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div>
<div class=navbar>
NAVBAR CONTENTS
</div>
<div class="center-page">
ALL MY "label" and ASP "input" and Sign Up "button"
</div>
</div>
<div>
<footer class="footer-pos">
<div> © 2018 Copyright: HRCA </div>
</footer>
</div>
I am using bootstrap 4.1.3 (bootstrap.min.css) and here are my custom CSS code for the content(center-page) and my footer
.center-page {
width: 400px;
height: 400px;
position: absolute;
top: -40px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.footer-pos {
width: auto;
height: auto;
position: absolute;
top: 860px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div>
<div class=navbar>
NAVBAR CONTENTS
</div>
<div class="center-page">
ALL MY "label" and ASP "input" and Sign Up "button"
</div>
</div>
<div>
<footer class="footer-pos">
<div> © 2018 Copyright: HRCA </div>
</footer>
</div>
.center-page {
width: 400px;
height: 400px;
position: absolute;
top: -40px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.footer-pos {
width: auto;
height: auto;
position: absolute;
top: 860px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div>
<div class=navbar>
NAVBAR CONTENTS
</div>
<div class="center-page">
ALL MY "label" and ASP "input" and Sign Up "button"
</div>
</div>
<div>
<footer class="footer-pos">
<div> © 2018 Copyright: HRCA </div>
</footer>
</div>
html css
html css
edited Nov 7 at 20:53
JJJ
29k147591
29k147591
asked Nov 7 at 13:32
Elvis
15
15
You need to use the column system in Bootstrap and stop using absolute positioning.
– rpm192
Nov 7 at 13:38
position: absolute
works relative to a parent div, tryposition: fixed
to make it relative to the viewport
– arieljuod
Nov 7 at 13:40
1
I would stop using absolute positioning until you know how to use it properly, instead use flex for this as it will be simpler and easier to understand - I have several different approaches to a sticky footer as outlined in my answer here: stackoverflow.com/questions/23651942/…
– Pete
Nov 7 at 13:41
Or use bootstraps sticky footer template: getbootstrap.com/docs/4.1/examples/sticky-footer-navbar
– Pete
Nov 7 at 13:59
hi @Pete , I am not looking for a sticky footer, I want it to be just at the bottom of the page, not the type that go with you when scrolling, on a side note, i tried position:fixed, it is block my content when I had scrolled down
– Elvis
Nov 7 at 14:05
|
show 5 more comments
You need to use the column system in Bootstrap and stop using absolute positioning.
– rpm192
Nov 7 at 13:38
position: absolute
works relative to a parent div, tryposition: fixed
to make it relative to the viewport
– arieljuod
Nov 7 at 13:40
1
I would stop using absolute positioning until you know how to use it properly, instead use flex for this as it will be simpler and easier to understand - I have several different approaches to a sticky footer as outlined in my answer here: stackoverflow.com/questions/23651942/…
– Pete
Nov 7 at 13:41
Or use bootstraps sticky footer template: getbootstrap.com/docs/4.1/examples/sticky-footer-navbar
– Pete
Nov 7 at 13:59
hi @Pete , I am not looking for a sticky footer, I want it to be just at the bottom of the page, not the type that go with you when scrolling, on a side note, i tried position:fixed, it is block my content when I had scrolled down
– Elvis
Nov 7 at 14:05
You need to use the column system in Bootstrap and stop using absolute positioning.
– rpm192
Nov 7 at 13:38
You need to use the column system in Bootstrap and stop using absolute positioning.
– rpm192
Nov 7 at 13:38
position: absolute
works relative to a parent div, try position: fixed
to make it relative to the viewport– arieljuod
Nov 7 at 13:40
position: absolute
works relative to a parent div, try position: fixed
to make it relative to the viewport– arieljuod
Nov 7 at 13:40
1
1
I would stop using absolute positioning until you know how to use it properly, instead use flex for this as it will be simpler and easier to understand - I have several different approaches to a sticky footer as outlined in my answer here: stackoverflow.com/questions/23651942/…
– Pete
Nov 7 at 13:41
I would stop using absolute positioning until you know how to use it properly, instead use flex for this as it will be simpler and easier to understand - I have several different approaches to a sticky footer as outlined in my answer here: stackoverflow.com/questions/23651942/…
– Pete
Nov 7 at 13:41
Or use bootstraps sticky footer template: getbootstrap.com/docs/4.1/examples/sticky-footer-navbar
– Pete
Nov 7 at 13:59
Or use bootstraps sticky footer template: getbootstrap.com/docs/4.1/examples/sticky-footer-navbar
– Pete
Nov 7 at 13:59
hi @Pete , I am not looking for a sticky footer, I want it to be just at the bottom of the page, not the type that go with you when scrolling, on a side note, i tried position:fixed, it is block my content when I had scrolled down
– Elvis
Nov 7 at 14:05
hi @Pete , I am not looking for a sticky footer, I want it to be just at the bottom of the page, not the type that go with you when scrolling, on a side note, i tried position:fixed, it is block my content when I had scrolled down
– Elvis
Nov 7 at 14:05
|
show 5 more comments
5 Answers
5
active
oldest
votes
up vote
0
down vote
Positioning both elements as absolute is where your issue lies. Your body should not have absolute positioning the way you have it set up.
I want to have the form to start at the center of my page, so I tried using absolute, how can I fix both my footer and the form still be at the middle?
– Elvis
Nov 7 at 13:59
I have tried to remove the absolute at the center page, by adding some padding-top, i can go with it, but the footer with absolute is blocking my content at the bottom of the page
– Elvis
Nov 7 at 14:11
add a comment |
up vote
0
down vote
You are positioning your footer absolutely, and giving it a top value, which is going to determine how far down the page it starts. If you just remove that, the bottom value (0) will position it starting from the bottom up.
For the signup button, try adding some padding to the bottom of the parent element (I'd imagine it's the element here) I.e., padding-bottom: 50px.
CSS can be finicky, but you'll get the hang of it!
Yeah, if I were to remove the top value, the whole page would be mine footer, any recommendation of this?
– Elvis
Nov 7 at 14:01
add a comment |
up vote
0
down vote
CSS:
.footer-pos {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
HTML:
<div class=navbar>
NAVBAR CONTENTS
</div>
<div class="center-page">
ALL MY "label" and ASP "input" and Sign Up "button"
</div>
<div class="footer-pos">
© 2018 Copyright: HRCA
</div>
top was pushing the thing to the middle.
add a comment |
up vote
0
down vote
thanks everyone for your help and contribution!
I had solved the problem by referencing to the bootstrap sticky footer template!
https://getbootstrap.com/docs/4.1/examples/sticky-footer-navbar/
I change my HTML body to as follows
<div class="navbar navbar-expand-lg navbar-dark bg-dark" role="navigation">
NAVBAR
</div>
<div class="container center-page">
CONTENT
</div>
<footer class="footer">
<div class="container">
© 2018 Copyright: HRCA
</div>
</footer>
And with minimal custom CSS styling too!
.center-page {
width: 300px;
padding-top:50px;
padding-bottom: 50px;
}
add a comment |
up vote
0
down vote
You should do:
.footer-pos {
position: fixed;/*To make it always be at that point.*/
top: 100%;/*to make it 100% at the bottom*/
transform: translate(0%, -100%);/*To make sure it will calculate from the bottom*/
}
add a comment |
5 Answers
5
active
oldest
votes
5 Answers
5
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
Positioning both elements as absolute is where your issue lies. Your body should not have absolute positioning the way you have it set up.
I want to have the form to start at the center of my page, so I tried using absolute, how can I fix both my footer and the form still be at the middle?
– Elvis
Nov 7 at 13:59
I have tried to remove the absolute at the center page, by adding some padding-top, i can go with it, but the footer with absolute is blocking my content at the bottom of the page
– Elvis
Nov 7 at 14:11
add a comment |
up vote
0
down vote
Positioning both elements as absolute is where your issue lies. Your body should not have absolute positioning the way you have it set up.
I want to have the form to start at the center of my page, so I tried using absolute, how can I fix both my footer and the form still be at the middle?
– Elvis
Nov 7 at 13:59
I have tried to remove the absolute at the center page, by adding some padding-top, i can go with it, but the footer with absolute is blocking my content at the bottom of the page
– Elvis
Nov 7 at 14:11
add a comment |
up vote
0
down vote
up vote
0
down vote
Positioning both elements as absolute is where your issue lies. Your body should not have absolute positioning the way you have it set up.
Positioning both elements as absolute is where your issue lies. Your body should not have absolute positioning the way you have it set up.
answered Nov 7 at 13:39
Payton Jewell
12
12
I want to have the form to start at the center of my page, so I tried using absolute, how can I fix both my footer and the form still be at the middle?
– Elvis
Nov 7 at 13:59
I have tried to remove the absolute at the center page, by adding some padding-top, i can go with it, but the footer with absolute is blocking my content at the bottom of the page
– Elvis
Nov 7 at 14:11
add a comment |
I want to have the form to start at the center of my page, so I tried using absolute, how can I fix both my footer and the form still be at the middle?
– Elvis
Nov 7 at 13:59
I have tried to remove the absolute at the center page, by adding some padding-top, i can go with it, but the footer with absolute is blocking my content at the bottom of the page
– Elvis
Nov 7 at 14:11
I want to have the form to start at the center of my page, so I tried using absolute, how can I fix both my footer and the form still be at the middle?
– Elvis
Nov 7 at 13:59
I want to have the form to start at the center of my page, so I tried using absolute, how can I fix both my footer and the form still be at the middle?
– Elvis
Nov 7 at 13:59
I have tried to remove the absolute at the center page, by adding some padding-top, i can go with it, but the footer with absolute is blocking my content at the bottom of the page
– Elvis
Nov 7 at 14:11
I have tried to remove the absolute at the center page, by adding some padding-top, i can go with it, but the footer with absolute is blocking my content at the bottom of the page
– Elvis
Nov 7 at 14:11
add a comment |
up vote
0
down vote
You are positioning your footer absolutely, and giving it a top value, which is going to determine how far down the page it starts. If you just remove that, the bottom value (0) will position it starting from the bottom up.
For the signup button, try adding some padding to the bottom of the parent element (I'd imagine it's the element here) I.e., padding-bottom: 50px.
CSS can be finicky, but you'll get the hang of it!
Yeah, if I were to remove the top value, the whole page would be mine footer, any recommendation of this?
– Elvis
Nov 7 at 14:01
add a comment |
up vote
0
down vote
You are positioning your footer absolutely, and giving it a top value, which is going to determine how far down the page it starts. If you just remove that, the bottom value (0) will position it starting from the bottom up.
For the signup button, try adding some padding to the bottom of the parent element (I'd imagine it's the element here) I.e., padding-bottom: 50px.
CSS can be finicky, but you'll get the hang of it!
Yeah, if I were to remove the top value, the whole page would be mine footer, any recommendation of this?
– Elvis
Nov 7 at 14:01
add a comment |
up vote
0
down vote
up vote
0
down vote
You are positioning your footer absolutely, and giving it a top value, which is going to determine how far down the page it starts. If you just remove that, the bottom value (0) will position it starting from the bottom up.
For the signup button, try adding some padding to the bottom of the parent element (I'd imagine it's the element here) I.e., padding-bottom: 50px.
CSS can be finicky, but you'll get the hang of it!
You are positioning your footer absolutely, and giving it a top value, which is going to determine how far down the page it starts. If you just remove that, the bottom value (0) will position it starting from the bottom up.
For the signup button, try adding some padding to the bottom of the parent element (I'd imagine it's the element here) I.e., padding-bottom: 50px.
CSS can be finicky, but you'll get the hang of it!
answered Nov 7 at 13:45
Sarah Elizabeth Waldie
162
162
Yeah, if I were to remove the top value, the whole page would be mine footer, any recommendation of this?
– Elvis
Nov 7 at 14:01
add a comment |
Yeah, if I were to remove the top value, the whole page would be mine footer, any recommendation of this?
– Elvis
Nov 7 at 14:01
Yeah, if I were to remove the top value, the whole page would be mine footer, any recommendation of this?
– Elvis
Nov 7 at 14:01
Yeah, if I were to remove the top value, the whole page would be mine footer, any recommendation of this?
– Elvis
Nov 7 at 14:01
add a comment |
up vote
0
down vote
CSS:
.footer-pos {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
HTML:
<div class=navbar>
NAVBAR CONTENTS
</div>
<div class="center-page">
ALL MY "label" and ASP "input" and Sign Up "button"
</div>
<div class="footer-pos">
© 2018 Copyright: HRCA
</div>
top was pushing the thing to the middle.
add a comment |
up vote
0
down vote
CSS:
.footer-pos {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
HTML:
<div class=navbar>
NAVBAR CONTENTS
</div>
<div class="center-page">
ALL MY "label" and ASP "input" and Sign Up "button"
</div>
<div class="footer-pos">
© 2018 Copyright: HRCA
</div>
top was pushing the thing to the middle.
add a comment |
up vote
0
down vote
up vote
0
down vote
CSS:
.footer-pos {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
HTML:
<div class=navbar>
NAVBAR CONTENTS
</div>
<div class="center-page">
ALL MY "label" and ASP "input" and Sign Up "button"
</div>
<div class="footer-pos">
© 2018 Copyright: HRCA
</div>
top was pushing the thing to the middle.
CSS:
.footer-pos {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
HTML:
<div class=navbar>
NAVBAR CONTENTS
</div>
<div class="center-page">
ALL MY "label" and ASP "input" and Sign Up "button"
</div>
<div class="footer-pos">
© 2018 Copyright: HRCA
</div>
top was pushing the thing to the middle.
edited Nov 7 at 13:47
answered Nov 7 at 13:40
Floww
2710
2710
add a comment |
add a comment |
up vote
0
down vote
thanks everyone for your help and contribution!
I had solved the problem by referencing to the bootstrap sticky footer template!
https://getbootstrap.com/docs/4.1/examples/sticky-footer-navbar/
I change my HTML body to as follows
<div class="navbar navbar-expand-lg navbar-dark bg-dark" role="navigation">
NAVBAR
</div>
<div class="container center-page">
CONTENT
</div>
<footer class="footer">
<div class="container">
© 2018 Copyright: HRCA
</div>
</footer>
And with minimal custom CSS styling too!
.center-page {
width: 300px;
padding-top:50px;
padding-bottom: 50px;
}
add a comment |
up vote
0
down vote
thanks everyone for your help and contribution!
I had solved the problem by referencing to the bootstrap sticky footer template!
https://getbootstrap.com/docs/4.1/examples/sticky-footer-navbar/
I change my HTML body to as follows
<div class="navbar navbar-expand-lg navbar-dark bg-dark" role="navigation">
NAVBAR
</div>
<div class="container center-page">
CONTENT
</div>
<footer class="footer">
<div class="container">
© 2018 Copyright: HRCA
</div>
</footer>
And with minimal custom CSS styling too!
.center-page {
width: 300px;
padding-top:50px;
padding-bottom: 50px;
}
add a comment |
up vote
0
down vote
up vote
0
down vote
thanks everyone for your help and contribution!
I had solved the problem by referencing to the bootstrap sticky footer template!
https://getbootstrap.com/docs/4.1/examples/sticky-footer-navbar/
I change my HTML body to as follows
<div class="navbar navbar-expand-lg navbar-dark bg-dark" role="navigation">
NAVBAR
</div>
<div class="container center-page">
CONTENT
</div>
<footer class="footer">
<div class="container">
© 2018 Copyright: HRCA
</div>
</footer>
And with minimal custom CSS styling too!
.center-page {
width: 300px;
padding-top:50px;
padding-bottom: 50px;
}
thanks everyone for your help and contribution!
I had solved the problem by referencing to the bootstrap sticky footer template!
https://getbootstrap.com/docs/4.1/examples/sticky-footer-navbar/
I change my HTML body to as follows
<div class="navbar navbar-expand-lg navbar-dark bg-dark" role="navigation">
NAVBAR
</div>
<div class="container center-page">
CONTENT
</div>
<footer class="footer">
<div class="container">
© 2018 Copyright: HRCA
</div>
</footer>
And with minimal custom CSS styling too!
.center-page {
width: 300px;
padding-top:50px;
padding-bottom: 50px;
}
answered Nov 7 at 14:28
Elvis
15
15
add a comment |
add a comment |
up vote
0
down vote
You should do:
.footer-pos {
position: fixed;/*To make it always be at that point.*/
top: 100%;/*to make it 100% at the bottom*/
transform: translate(0%, -100%);/*To make sure it will calculate from the bottom*/
}
add a comment |
up vote
0
down vote
You should do:
.footer-pos {
position: fixed;/*To make it always be at that point.*/
top: 100%;/*to make it 100% at the bottom*/
transform: translate(0%, -100%);/*To make sure it will calculate from the bottom*/
}
add a comment |
up vote
0
down vote
up vote
0
down vote
You should do:
.footer-pos {
position: fixed;/*To make it always be at that point.*/
top: 100%;/*to make it 100% at the bottom*/
transform: translate(0%, -100%);/*To make sure it will calculate from the bottom*/
}
You should do:
.footer-pos {
position: fixed;/*To make it always be at that point.*/
top: 100%;/*to make it 100% at the bottom*/
transform: translate(0%, -100%);/*To make sure it will calculate from the bottom*/
}
answered Nov 7 at 21:04
codeWithMe
160110
160110
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53190482%2ffooter-not-at-the-bottom-of-the-whole-pages%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You need to use the column system in Bootstrap and stop using absolute positioning.
– rpm192
Nov 7 at 13:38
position: absolute
works relative to a parent div, tryposition: fixed
to make it relative to the viewport– arieljuod
Nov 7 at 13:40
1
I would stop using absolute positioning until you know how to use it properly, instead use flex for this as it will be simpler and easier to understand - I have several different approaches to a sticky footer as outlined in my answer here: stackoverflow.com/questions/23651942/…
– Pete
Nov 7 at 13:41
Or use bootstraps sticky footer template: getbootstrap.com/docs/4.1/examples/sticky-footer-navbar
– Pete
Nov 7 at 13:59
hi @Pete , I am not looking for a sticky footer, I want it to be just at the bottom of the page, not the type that go with you when scrolling, on a side note, i tried position:fixed, it is block my content when I had scrolled down
– Elvis
Nov 7 at 14:05