Jump to content
AARRGGHHH

Keeping a Footer on the Bottom - Issue with W3Schools Sample Code

Recommended Posts

My suggestion is to not use a fixed footer? Just put it in at the bottom of the page.

Edited by Funce

Share this post


Link to post
Share on other sites

Changing to absolute or block , or removing the position entirely, just creates different problems.  There's no way to " Just put it in at the bottom of the page." since the location of the bottom will vary based on screen resolution

Share this post


Link to post
Share on other sites

What issues are you having in regards to it? I need something a bit more specific.

Is it the webpage doesn't reach the bottom of the browser in some resolutions? That's fixable.

Is it layout issues, and has nowhere for it to fit? That's fixable.

 

Share this post


Link to post
Share on other sites
18 hours ago, dsonesuk said:

https://www.w3schools.com/code/tryit.asp?filename=FVLGIE5M0TM4

The footer remains at bottom until content extends beyond that of the footer, then it will remain at bottom of content.

i tried something like the code u sent... (my footer has a certain width of 60px for example.

i want it right in the middle and in the footer:

<div class="down">
	<div class="downcenter"> footer
    </div>
</div>

<style>
  .down{

}
.downcenter{
	bottom: 0;
	position: absolute;
	display: block;
  background-color: rgba(0,0,0,.5);
  color:#fdfdfd;
  width: 100px;
  height:20px;
   margin-left: auto;
   margin-right: auto;

}
</style>

but it wont work it goes to the left and stick there!

i even tried this but it is in left corner and wont move to center:

.down{
bottom: 0;

    position: absolute;
	height: 20px;
    width: 200px;
	margin:0 auto;
}
.downcenter{
	display: block;
  background-color: rgba(0,0,0,.5);
  color:#fdfdfd;
  width:100%;

}

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...