# Solved: Can I anchor DIV to bottom of page with CSS?



## mattvot

Can I anchor DIV to bottom of page with CSS? and if it isn't much trouble, how?

What I want is to anchor a DIV box to the bottom of a page but not the browser, so the main DIV fills the rest of the space above it.


----------



## caraewilton

This should help you.


----------



## mattvot

OMG, you do not know how long I have wanted to know this! Thanks alot


----------



## mattvot

PS, about your site, how about a search button to acompany the text box? and that it clears when you click in the box


----------



## tomdkat

caraewilton said:


> This should help you.


Thanks for the link. The tutorial was useful. The thing I don't get is the use of negative margins and the "clearfooter" DIV. I just came up with this which solution, uses neither negative margins or a "clearfooter" kind of DIV:


Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Static footer at bottom of page</title>
  <style type="text/css">
html {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.pagecontent {
  border: 1px solid #cc0000;
  display: block;
  margin-right: auto;
  margin-left: auto;
  margin-top: 0px;
  padding-top: 0px;
  background-color: silver;
  min-height: 100%;
  padding-left: 10px;
  width: 790px;
}
.footer {
  border-style: solid;
  border-width: 1px;
  border-left: 1px solid #33ff33;
  border-right: 1px solid #33ff33;
  border-bottom: 1px solid #33ff33;
  display: block;
  height: 80px;
  bottom: 0px;
  text-align: right;
  font-style: italic;
  width: 800px;
  margin-right: auto;
  margin-left: auto;
  background-color: #cc9933;
}
  </style>
</head>

<body style="color: rgb(0, 0, 0); background-color: rgb(51, 51, 51);" alink="#000099" link="#000099" vlink="#990099">

<div class="pagecontent">
<p>This is some text!</p>
<p>This is some text!</p>
<p>This is some text!</p>
<p>This is some text!</p>
<p>This is some text!</p>
<p>This is some text!</p>
<p>This is some text!</p>
<p>This is some text!</p>
<p>This is some text!</p>
<p>This is some text!</p>
<p>This is some text!</p>
<p>This is some text!</p>
<p>This is some text!</p>
<p>This is some text!</p>
<p>This is some text!</p>
<p>This is some text!</p>
<p>This is some text!</p>
<p>This is some text!</p>
<p>This is some text!</p>
<p>This is some text!</p>
<p>This is some text!</p>
<p>This is some text!</p>
<p>This is some text!</p>
<p>This is some text!</p>
<p>This is some text!</p>
<p>This is some text!</p>
<p>This is some text!</p>
<p>This is some text!</p>
<p>This is some text!</p>
<p>This is some text!</p>
<p>This is some text!</p>
<p>This is some text!</p>
<p>This is some text!</p>
<p>This is some text!</p>
<p>This is some text!</p>
<p>This is some text!</p>
<p>This is some text!</p>
<p>This is some text!</p>
<p>This is some text!</p>
<p>This is some text!</p>
</div>

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

</body>
</html>

Peace...


----------



## caraewilton

Cool. Very neat Tomdkat.


----------



## caraewilton

mattvot said:


> PS, about your site, how about a search button to acompany the text box? and that it clears when you click in the box


Are you talking about my personal site. Yeah, a search button would be cool, but I got rid of it when I kept have problems with people using larger fonts sizes in their browser then not being able to see the full menu. The text box was a compromise.


----------



## tomdkat

tomdkat said:


> Thanks for the link. The tutorial was useful. The thing I don't get is the use of negative margins and the "clearfooter" DIV. I just came up with this which solution, uses neither negative margins or a "clearfooter" kind of DIV:
> 
> 
> Code:
> 
> 
> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
> <html>
> <head>
> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
> <title>Static footer at bottom of page</title>
> <style type="text/css">
> html {
> height: 100%;
> }
> body {
> margin: 0;
> padding: 0;
> height: 100%;
> }
> .pagecontent {
> border: 1px solid #cc0000;
> display: block;
> margin-right: auto;
> margin-left: auto;
> margin-top: 0px;
> padding-top: 0px;
> background-color: silver;
> min-height: 100%;
> padding-left: 10px;
> width: 790px;
> }
> .footer {
> border-style: solid;
> border-width: 1px;
> border-left: 1px solid #33ff33;
> border-right: 1px solid #33ff33;
> border-bottom: 1px solid #33ff33;
> display: block;
> height: 80px;
> bottom: 0px;
> text-align: right;
> font-style: italic;
> width: 800px;
> margin-right: auto;
> margin-left: auto;
> background-color: #cc9933;
> }
> </style>
> </head>
> 
> <body style="color: rgb(0, 0, 0); background-color: rgb(51, 51, 51);" alink="#000099" link="#000099" vlink="#990099">
> 
> <div class="pagecontent">
> <p>This is some text!</p>
> <p>This is some text!</p>
> <p>This is some text!</p>
> <p>This is some text!</p>
> <p>This is some text!</p>
> <p>This is some text!</p>
> <p>This is some text!</p>
> <p>This is some text!</p>
> <p>This is some text!</p>
> <p>This is some text!</p>
> <p>This is some text!</p>
> <p>This is some text!</p>
> <p>This is some text!</p>
> <p>This is some text!</p>
> <p>This is some text!</p>
> <p>This is some text!</p>
> <p>This is some text!</p>
> <p>This is some text!</p>
> <p>This is some text!</p>
> <p>This is some text!</p>
> <p>This is some text!</p>
> <p>This is some text!</p>
> <p>This is some text!</p>
> <p>This is some text!</p>
> <p>This is some text!</p>
> <p>This is some text!</p>
> <p>This is some text!</p>
> <p>This is some text!</p>
> <p>This is some text!</p>
> <p>This is some text!</p>
> <p>This is some text!</p>
> <p>This is some text!</p>
> <p>This is some text!</p>
> <p>This is some text!</p>
> <p>This is some text!</p>
> <p>This is some text!</p>
> <p>This is some text!</p>
> <p>This is some text!</p>
> <p>This is some text!</p>
> <p>This is some text!</p>
> </div>
> 
> <div class="footer">footer</div>
> 
> </body>
> </html>
> 
> Peace...


This one is even simpler! 


Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Static footer, #3</title>
  <style type="text/css">
html {
  height: 100%;
}
body {
  height: 100%;
  margin-top: 0px;
  padding-top: 0px;
  top: 0px;
}
.box {
  display: block;
  margin-right: auto;
  margin-left: auto;
  padding-left: 10px;
  padding-right: 10px;
  width: 780px;
}
#content {
  border: 1px solid #cc0000;
  background-color: #33ffff;
  min-height: 100%;
}
#footer {
  border: 1px solid #33ff33;
  text-align: right;
  height: 80px;
  background-color: #cc6600;
}

  </style>
</head>
<body style="color: rgb(0, 0, 0); background-color: rgb(51, 51, 51);" alink="#000099" link="#000099" vlink="#990099">
<div class="box" id="content">content</div>
<div id="footer" class="box">footer</div>

</body>
</html>

Of course, it won't work in IE6 but that wouldn't be hard to change. 

Peace...


----------



## mattvot

does it work in IE7 cause when i use the other version with negitives it doesn't


----------



## tomdkat

This is how it looks in IE7 for me. I added the colored borders so I could verify how things were laying out.

Peace...


----------



## tomdkat

mattvot said:


> does it work in IE7 cause when i use the other version with negitives it doesn't


How did the original example, with the negative margin, render for you?

Peace...


----------



## tomdkat

Ok, my previous examples above are wrong. I now better understand the use of the negative margin.

Here is an updated version which I think functions more correctly:


Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Static footer, #4</title>
  <style type="text/css">
* {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
  overflow: inherit;
}
body {
  height: 100%;
}
#content {
  background-color: #99ffff;
  min-height: 100%;
  margin-right: auto;
  margin-left: auto;
  position: relative;
  display: block;
  width: 800px;
}
#footer {
  height: 80px;
  text-align: right;
  font-style: italic;
  font-size: small;
  background-color: #ffcc66;
  position: absolute;
  clear: both;
  bottom: 0px;
  display: block;
  width: 100%;
}
#content p {
  padding-left: 10px;
  padding-top: 10px;
}
  </style>
</head>
<body style="color: black; background-color: rgb(51, 51, 51);" alink="#000099" link="#000099" vlink="#990099">

<div id="content">

<p>This is some text!</p>

<div id="footer">footer</div>

</div>

</body>
</html>

The problem with my examples above is they would display scroll bars inappropriately. The code I'm posting above addresses that. It also doesn't use the negative margin by simply putting the "footer" DIV *inside* the DIV that contains the rest of the page content. By giving the parent DIV and relative position and the footer an absolute position, the footer can be placed at the bottom of the parent DIV (which will have the full height of the browser's viewport). Additionally, adding a "clear: both" rule to the footer DIV's style makes sure the footer will effectively be "pushed down" as more content was added to the page, something my previous examples didn't do.

Thanks again to caraewilton for posting that link since I've learned something new today. 

Peace...


----------

