Home/ Questions/Q 6954439
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T14:36:23+00:00

I have a countdown timer and a responsive wallpaper. Now what I want to

  • 0

I have a countdown timer and a responsive wallpaper. Now what I want to do is that center the div at the bottom of the page & it should always stay at bottom. I went through some similar questions on StackOverFlow but by implementing that code I used to get a scrollbar or there was some space left at the bottom of the page. These are the following codes I used:

 div { 
   position: absolute; 
   height: 100px; 
   top: 100%; 
   margin-top:-100px; 
}

The above code gave me a scroll bar and the following code leaves some space at the bottom

position:absolute;
bottom:0;

This is the CSS on the index page for the Responsive image :

<style>

body {

background-attachment: fixed;

background-image: url(bg.png);

background-position: top center;

background-repeat: no-repeat;



margin:0;

padding: 0;



background-size: cover;

-moz-background-size: cover;

-webkit-background-size: cover; }

</style>

& this is the style.css which I have

    body, p, span, div                                                              { font-family: 'Droid Sans', arial, serif;font-size:12px;line-height:18px;color:#6d6d6d; } 


.countdown                                                                      { padding-top:15px;width:100%;margin:auto; }
.countdown .countdown_section                                                   { background:url('images/backcountdown.png') no-repeat 1px top;float:left;width:54px;height:145px;margin:0 5px;text-align:center;line-height:6px; }
.countdown .countdown_amount                                                    { font-size:15px;color:#ab7100; text-shadow:0 0.8px #fedd98; line-height:52px; font-weight:bold; text-align: left; }
.countdown span                                                                 { font-size:8px;color:#999999;text-transform:uppercase;line-height:26px; }

Actually there’s just one div class on the index page named “countdown clearfix”. I’m a noob at HTML/CSS so I needed some help.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can also try the sticky footer technique:

    <!DOCTYPE html>
<html>
<head>
  <style>
    /* Add styles from next code block here if you want them in the same file */
  </style>
</head>
<body>
  <div id="wrapper">

    <!-- Regular page contents -->

    <div id="push"><!-- Leave this element empty --></div>
  </div>
  <div id="footer">
    <!-- Countdown goes here -->
  </div>
</body>
</html>

    With the following CSS (in a separate file or inside the <style> tag):

    html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin-bottom: -100px; /* <- If you change this height... */
}
#footer, #push {
  height: 100px;         /* <- ...then you should also change this height! */
}

body {
  background-attachment: fixed;
  background-image: url(bg.png);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
}

    Notice how <html>, <body> and <div id="wrapper"> are all 100% height of the viewport, and that the <div id="wrapper"> then allows some room at the bottom with a negative margin of 100px, which is then filled by the <div id="footer">. The <div id="push"> is just there to assure that the room for the footer is always available.

    If the page content is smaller than the viewport, the footer will ‘stick’ to the bottom of the browser viewport, if the content is bigger, then the footer will always be at the bottom.

    • 0