CODEWITHSUNDEEP
htmlcss
Netizen110
Netizen110

Reputation: 1654

Push DIV to the bottom of the page

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.

Upvotes: 3

Views: 10862

Answers (4)

Michiel van Oosterhout
Michiel van Oosterhout

Reputation: 23084

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.

Upvotes: 6

Chris Brickhouse
Chris Brickhouse

Reputation: 648

use this exact code and it will work.

<html>
<head>
<style>
#body {
    margin:0;
    padding:0;
    height:auto;
    text-align:center;
    width:100%;
}
#wrap {
    margin:0 auto 0 auto;
    text-align:left;    
    position:relative;
    width:1000px;
}
#bottom {
    position:fixed;
    bottom:0;
    padding: 10px;
    text-align:center;
    height: 50px;
    border:1px solid #c0c0c0;
    width:1000px;
    margin: 0;
}
</style>
</head>
<body>
    <div id="wrap">
        <div id="bottom">
            bottom
        </div>
    </div>
</body>
</html>

Upvotes: 1

Chris Brickhouse
Chris Brickhouse

Reputation: 648

to place a div 100px high/1000px wide div in the center-bottom you would just need:

#bottom-div {
    height:100px;
    width:1000px;
    margin:0 auto 0 auto;
    bottom:0;
    position:absolute;
}

Upvotes: 2

wanovak
wanovak

Reputation: 6127

div {
    position: absolute;
    height: 100px; /* this and */
    bottom: 100px; /* this should correspond with eachother */
    margin: 0;
    padding: 0;
}

Upvotes: 1

Related Questions