Jump to content

Sticky footer problem


Ant

Recommended Posts

I have been trying to get various sticky footers to work on my sites foundation.

Without it I cant continue with the layout and LEARNING css etc.

 

So far I'm using code which I found on a link on this site:

http://www.killersites.com/forums/topic/1490/position-footer-so-that-it-does-not-scroll-up-the-page/

 

My problem is when I began learning this stuff I got as far as using wrappers with relative pos. and all my other divs with absolute pos.. That to me was the easiest way to do a layout with css pos.

 

I came to a stopt once I realized my sites should at some point incorporate a dynamic style and be able to grow vertically as content grew. i realized my static div layout would not work.

Enter the sticky footer.

I have been trying to incorporate a sticky footer solution into what I have learned so far, but I just cant get it to work with my limited knowledge.

 

Here's what I have so far as a TEST to try and learn it:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[url]http://www.w3.org/TR/html4/strict.dtd[/url]">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>{ visibility: inherit; } Sticky Footer Technique #2</title>
<style type="text/css">
* {
margin:0; /* zero out margin */ 
padding:0; /* zero out padding */
}
html, body {
height:100%; /* gives layout 100% height */
overflow:inherit; /* triggers 100% height in Opera 9.5 */
background:#333;
}
#wrapper {
min-height:100%; /* gives layout 100% height */
width:990px; /* centers #wrapper */
position:relative; /* positions the #footer relative to the #wrapper */
background:#CCC;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#header {
position: absolute;
width: 990px;
left: 0px;
top: 0px;
height: 100px;
}
#left_main {
background-color: #666666;
width: 500px;
position: absolute;
left: 0px;
top: 100px;
}
* html #wrapper { 
height:100%; /* IE6 treats height as min-height */
}
p {
font-size:1.8em;
font-weight:bold;
text-align:center;
padding:200px 0 80px; /* bottom padding clears the #footer */
}
#footer {
position:absolute; /* positions #footer at bottom of #wrapper */
bottom:0;left:0;
height:80px;
width:990px; 
background:#999;
}
.style1 {
font-size: 36px;
color: #66FF00;
}
</style> 
</head>
<body>

<div id="wrapper">
 <div id="header">Content for  id "header" Goes Here</div>


 <div id="left_main">
   <p>Content for  id "left_main" Goes Here</p>

 </div>
 <p># div</p>


 <div class="style1" id="footer">copyright</div>
<!-- #footer sits inside the #wrapper -->

</div><!-- end #wrapper -->

</body>
</html>

 

What is throwing me is this " <p># div</p> " I know it's doing something to help the sticky footer, but I don't understand why someone chose to use the p tag as part of the solution. So I then tried to replace it with a class called .push with the same padding etc. applied to some text. I figured i would replace it because I thought it was proper to use the p tag as my main body copy throughout the site which i would restyle with css.

 

 

Every time I try and add my left main content div inside the wrapper and I add random text to it, it goes PAST the footer and doesn't push it like the p text in the wrapper does.All i want is my left content div to have a pos of absolute, give it the position in pixels down from the header and a 0 left position. I plan on doing something similar with the right content div.

 

The problem is I'm not understanding the relationship between the 2 divs i want to add (#left_main and #right ) and whats happening when i place them INSIDE the wrapper and how they interact with " <p># div</p> "

 

It seems ( I know I'm probably wrong and it's much more involved) like the p tag is forcing the footer down with it's padding. BUT I want my 2 divs to force it down, not the p tag in the wrapper.

 

 

Thanks

Ant

Link to comment
Share on other sites

All the sticky footers on the first page of google do not work in opera and ie8. They both have a redraw bug. There are a couple of different variations to fix but this is the easiest. http://www.visibilityinherit.com/code/sticky-footer-demo.php Ant, this puts the footer outside of the wrapper. This avoids another ie bug.

Link to comment
Share on other sites

Ant looks like your using an old sticky footer of mine. The p is simply some padding equal to the height of the footer. This s done so the footer does not ride up over your content. That p can be replaced with a div or padding on the last element or a br. Anything you want. It is commented as such in the code.

Link to comment
Share on other sites

Ant looks like your using an old sticky footer of mine. The p is simply some padding equal to the height of the footer. This s done so the footer does not ride up over your content. That p can be replaced with a div or padding on the last element or a br. Anything you want. It is commented as such in the code.

 

 

Guys, thanks for all your suggestions.

 

The one I tried to use was this one ( http://www.visibilityinherit.com/code/stickyfooter-technique2-example.php) BECAUSE it uses the position relative and absolute. When they don't and I go in and try and change them to specify the positioning everything gets screwed up. The first one I tried was the one that was posted in this thread : http://www.visibilityinherit.com/code/sticky-footer-demo.php When I tried to add my positioning etc it fell apart.

 

I know what I'm asking for is difficult because I do not have a good handle on all of it. So I can take a sticky footer code and use it but it's really way above my skill level and so it's difficult to rework it to fit my needs. But I think thats the best way for me to learn it.

 

I'll read it again and try and understand how it's doing what it's doing.

 

 

Ant

Link to comment
Share on other sites

Ant looks like your using an old sticky footer of mine. The p is simply some padding equal to the height of the footer. This s done so the footer does not ride up over your content. That p can be replaced with a div or padding on the last element or a br. Anything you want. It is commented as such in the code.

 

 

Eric I will see if I can replace the p with my left_content div and see what happens. Although I think I tried that already.

Does my left_content div have to have special properties to interact properly with the footer below it? Do i need to add the padding properties from p to my left_content div etc..

 

I'm way out of my league with the whole sticky footer solution. :o But I cant go back to learning layouts knowing my static footer will not work for the site I had in mind.

 

Ant

Link to comment
Share on other sites

First off I wanted to thank Eric for using the code he provided. I assume I am allowed to use it. If I'm not please say so. I don't think code is similiar to other forms of media with regard to copyright etc, but if it is please update me on the proper use or non use of it.

 

 

ok I had it I THINK until I went on to add my #right_main.

 

I thought I had to place the right_main INSIDE the #left_main and then float right the right_main div. I thought I had to do that so it would interact with the footer as the left_main does. I placed the padding on the right_main as it appears on the left_main but it doesn't push the footer down with the padding like the left_main does. My content, in the right div, just goes past the footer. Placing the right_main outside the left_main didn't work either.

 

Is any of the stuff I'm doing here remotely done properly? :(

 

Am i using the Position properties of CSS correctly?

 

As I said before, I had a good handle on positioning of my foundation divs to build a page when I was using the relative and absolute combination.

My wrapper was relative, then I just placed every other div using absolute and all was good.

 

Since thats not in place anymore (DUE TO THE STICKY CODE) EXCEPT for the relative wrapper together with the absolute footer I'm not sure how to place my additional divs ( left_main / right_main ) and what type of position property I should give them. Right now they are both defualt,(blank) so I assume they are STATIC??? I used the float:right to get my right_div to jump to the right of my wrapper and right_main div.

 

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[url]http://www.w3.org/TR/html4/strict.dtd[/url]">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>{ visibility: inherit; } Sticky Footer Technique #2</title>
<style type="text/css">
* {
margin:0; /* zero out margin */ 
padding:0; /* zero out padding */
}
html, body {
height:100%; /* gives layout 100% height */
overflow:inherit; /* triggers 100% height in Opera 9.5 */
background:#333;
}
#wrapper {
min-height:100%; /* gives layout 100% height */
width:990px; /* centers #wrapper */
position:relative;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#header {
position: absolute;
width: 990px;
left: 0px;
top: 0px;
height: 100px;
background-color: #00FFCC;
}
#left_main {
background-color: #FFFFFF;
width: 960px;
left: 0px;
top: 100px;
padding-bottom: 80px;
padding-top: 110px;
padding-right: 15px;
padding-left: 15px;
}
* html #wrapper { 
height:100%; /* IE6 treats height as min-height */
}
p {
font-size:11pt;
text-align:left; /* bottom padding clears the #footer */
font-family: Arial, Helvetica, sans-serif;
color: #666666;
line-height: 18px;
}
#footer {
position:absolute; /* positions #footer at bottom of #wrapper */
bottom:0;left:0;
height:80px;
width:990px; 
background:#999;
}
.style1 {
font-size: 36px;
color: #66FF00;
border: 1.5px dashed #666666;
padding-top: 8px;
padding-right: 8px;
padding-bottom: 12px;
padding-left: 8px;
background-color: #999999;
}



#right_main {
background-color: #009900;
width: 440px;
padding-top: 110px;
padding-bottom: 80px;
float: right;
padding-left: 5px;
margin-left: 22px;
}
</style> 
</head>
<body>

<div id="wrapper">
 <div id="header">Content for  id "header" Goes Here</div>




   <div id="left_main">

  <div id="right_main">
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 </div>



 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
 <p>mako reels</p>


 </div>

 <div class="style1" id="footer">copyright</div>
<!-- #footer sits inside the #wrapper -->

</div><!-- end #wrapper -->

</body>
</html>

Link to comment
Share on other sites

This is the sticky footer code which I think you are trying to use:-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>{ visibility: inherit; } Sticky Footer Technique #2</title>
<style type="text/css">
* {
margin:0; /* zero out margin */
padding:0; /* zero out padding */
}
html, body {
height:100%; /* gives layout 100% height */
overflow:inherit; /* triggers 100% height in Opera 9.5 */
background:#333;
}
#wrapper {         
   min-height:100%; /* gives layout 100% height */
   width:990px; /* centers #wrapper */
   position:relative;
   margin-top: 0;
   margin-right: auto;
   margin-bottom: 0;
   margin-left: auto;
}
#header {
   /*position: absolute;*/
   width: 990px;
   /*left: 0px;*/
   /*top: 0px;*/
   height: 100px;
   background-color: #00FFCC;
}
#left_main {
   background-color: #FFFFFF;
   width: 960px;
   /*left: 0px;*/
   /*top: 100px;*/
   padding-bottom: 10px; 
   padding-top: 10px;/*110px;*/
   padding-right: 15px;
   padding-left: 15px;
}
* html #wrapper {
height:100%; /* IE6 treats height as min-height */
}
p {
   font-size:11pt;
   text-align:left; /* bottom padding clears the #footer */
   font-family: Arial, Helvetica, sans-serif;
   color: #666666;
   line-height: 18px;
}
#clearfooter { height: 80px; border: 0; margin: 0; padding: 0; }
#footer { 
/*position:absolute;*/ /* positions #footer at bottom of window */
/*bottom:0;*/ left:0; margin-top: -80px;
height:80px;
width:990px;
background:#999;
}
.style1 {
   font-size: 36px;
   color: #66FF00;
   border: 1.5px dashed #666666;
   padding-top: 8px;
   padding-right: 8px;
   padding-bottom: 12px;
   padding-left: 8px;
   background-color: #999999;
}


#right_main {
   background-color: #009900;
   width: 440px;
   padding-top: 10px;/*110px;*/
   /*padding-bottom: 80px;*/
   float: right;
   padding-left: 5px;
   margin-left: 22px;
}
.clear { clear: both; width: 100%; height: 0; visibility: hidden; }
</style>
</head>
<body>

<div id="wrapper">
 <div id="header">Content for  id "header" Goes Here</div> 

   <div id="left_main">

     <div id="right_main">
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 
anim id est laborum."
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 
anim id est laborum."Lorem ipsum dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat 
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor 
sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
non proident, sunt in culpa qui officia deserunt mollit anim id est 
laborum."
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 
anim id est laborum."Lorem ipsum dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat 
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor 
sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
non proident, sunt in culpa qui officia deserunt mollit anim id est 
laborum."
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 
anim id est laborum."Lorem ipsum dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat 
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
culpa qui officia deserunt mollit anim id est laborum.</p>
 </div>



 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 
anim id est laborum."
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 
anim id est laborum."Lorem ipsum dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat 
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
culpa qui officia deserunt mollit anim id est laborum."</p> 
 <p>mako reels</p>

<div class="clear"> </div>
 </div> <!--end of #left_main-->

<div id="clearfooter"> </div> 
</div><!-- end #wrapper -->

 <div class="style1" id="footer">copyright</div>
<!-- #footer sits outside the #wrapper -->

<!--</div>--><!-- end #wrapper -->

</body>
</html>

 

I have made lots of edits, some are not related to the sticky footer. There is so much content in the right_main div that you don't see the effect of the sticky footer because it sits under the lowest content. If you delete nearly all the content in #left_main and #right_main you will see how it sticks to the bottom.

 

If you want a sticky footer to be visible all the time, you need the other sort as item 1a here:-

http://www.wickham43.supanet.com/tutorial/headerfooterfix.html

which uses position: fixed for the footer and doesn't use any height: 100%. It needs a margin-bottom on the #container equal to the height of the footer so that no content is hidden by the footer.

Link to comment
Share on other sites

Wickham, thank you.

 

 

All I want is to be able to add or subtract content from the page and have the footer be just underneath the last bit of longest content on the page. Whether it be the right or left column. I want the footer to appear when you scroll down to the longest part of the page.

 

When I tried your version, the footer worked perfectly for both columns and stuck to the bottom of the longest content. HOWEVER the footer was shifted to the left and did not line up centered and the same width as the rest of my divs. plus I think when I decreased the size of the page to a VERY small size on my browser, the footer stayed to the left and separated from the content.

 

So I tried this and it worked. I THINK, all I did was place the footer div inside the wrapper. I tried it in 3 different browsers and it works. I'm not sure why because you specified that the footer div was to be outside the wrapper.

 

Any ideas if this is correct and why it SEEMS to work?

 

 

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"[url]http://www.w3.org/TR/html4/strict.dtd[/url]">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>{ visibility: inherit; } Sticky Footer Technique #2</title>
<style type="text/css">
* {
margin:0; /* zero out margin */
padding:0; /* zero out padding */
}
html, body {
height:100%; /* gives layout 100% height */
overflow:inherit; /* triggers 100% height in Opera 9.5 */
background:#333;
}
#wrapper {         
   min-height:100%; /* gives layout 100% height */
   width:990px; /* centers #wrapper */
   position:relative;
   margin-top: 0;
   margin-right: auto;
   margin-bottom: 0;
   margin-left: auto;
}
#header {
   /*position: absolute;*/
   width: 990px;
   /*left: 0px;*/
   /*top: 0px;*/
   height: 100px;
   background-color: #00FFCC;
}
#left_main {
   background-color: #FFFFFF;
   width: 960px;
   /*left: 0px;*/
   /*top: 100px;*/
   padding-bottom: 10px; 
   padding-top: 10px;/*110px;*/
   padding-right: 15px;
   padding-left: 15px;
}
* html #wrapper {
height:100%; /* IE6 treats height as min-height */
}
p {
   font-size:11pt;
   text-align:left; /* bottom padding clears the #footer */
   font-family: Arial, Helvetica, sans-serif;
   color: #666666;
   line-height: 18px;
}
#clearfooter { height: 80px; border: 0; margin: 0; padding: 0; }
#footer {
margin-top: -80px;
height:80px;
width:970px;
background-color: #999;
text-align: center;
}
.style1 {
   font-size: 36px;
   color: #66FF00;
   border: 1.5px dashed #666666;
   padding-top: 8px;
   padding-right: 8px;
   padding-bottom: 12px;
   padding-left: 8px;
   background-color: #999999;
}


#right_main {
   background-color: #009900;
   width: 440px;
   padding-top: 10px;/*110px;*/
   /*padding-bottom: 80px;*/
   float: right;
   padding-left: 5px;
   margin-left: 22px;
}
.clear { clear: both; width: 100%; height: 0; visibility: hidden; }
</style>
</head>
<body>

<div id="wrapper">
 <div id="header">Content for  id "header" Goes Here</div> 

   <div>
     <p>Content for New Div Tag Goes Here</p>
     <p>ax</p>
     <p>ax</p>
     <p>ax</p>
     <p>ax</p>
     <p>x</p>
     <p>a</p>
     <p>xa</p>
     <p>x</p>
     <p>ax</p>
     <p>a</p>
     <p>x</p>
     <p> </p>
     <p>ax</p>
     <p> </p>
   </div>
   <div id="left_main">

     <div id="right_main">
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 
anim id est laborum."
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 
anim id est laborum."Lorem ipsum dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat 
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor 
sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
non proident, sunt in culpa qui officia deserunt mollit anim id est 
laborum."
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 
anim id est laborum."Lorem ipsum dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat 
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor 
sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
non proident, sunt in culpa qui officia deserunt mollit anim id est 
laborum."
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 
anim id est laborum."Lorem ipsum dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat 
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
culpa qui officia deserunt mollit anim id est laborum.</p>
 <p> </p>
 </div>



 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 
anim id est laborum."
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 
anim id est laborum."Lorem ipsum dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat 
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
culpa qui officia deserunt mollit anim id est laborum."</p> 
 <p>mako reelsfficia deserunt mollit 
anim id est laborum."
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 
anim id est laborum."Lorem ipsum dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, quis nofficia deserunt mollit 
anim id est laborum."
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 
anim id est laborum."Lorem ipsum dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, quis nofficia deserunt mollit 
anim id est laborum."
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 
anim id est laborum."Lorem ipsum dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, quis nofficia deserunt mollit 
anim id est laborum."
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 
anim id est laborum."Lorem ipsum dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, quis nofficia deserunt mollit 
anim id est laborum."
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 
anim id est laborum."Lorem ipsum dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, quis nofficia deserunt mollit 
anim id est laborum."
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 
anim id est laborum."Lorem ipsum dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, quis nofficia deserunt mollit 
anim id est laborum."
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 
anim id est laborum."Lorem ipsum dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, quis nodsfdsfdfds</p>

 <div class="clear"> </div>
 </div> <!--end of #left_main-->

<div id="clearfooter"> </div> 


 <div class="style1" id="footer">copyright</div>
 </div> <!-- end #wrapper -->




<!-- #footer sits outside the #wrapper -->

<!--</div>--><!-- end #wrapper -->

</body>
</html>

Link to comment
Share on other sites

Thanks Eric.

 

I added margin auto to l/r and it works.

 

Thank you very much to everyone for their help. I learned a lot about positioning from all this.

 

Now I have to figure out if there are right or wrong ways to do things going forward. For instance, besides being able to add a class to multiple elements, why would I place a class on a div as well as defining a div with an ID? Why not just define it all on in the ID?

 

Ant

Link to comment
Share on other sites

 

Now I have to figure out if there are right or wrong ways to do things going forward. For instance, besides being able to add a class to multiple elements, why would I place a class on a div as well as defining a div with an ID? Why not just define it all on in the ID?

 

Ant

 

I'm going to take a shot at answering this, to see if I understand it right. If I'm wrong, a correction will be appreciated.

Given you can only use an ID once in a page,

you can use a class as many times as you want.

So if you have a div you want to style the same 2 or more times in one page, give it a class.

If you have a div(ie #menubar) that you use once only, give it a ID.

Hope I got this right...

Link to comment
Share on other sites

There is another way in which you can use ID and class and that is that you can use them at the same time within the same tag.

 

Let's say you have a particular layout and one of the div is called #contents. Here you may have added tons of css tyles specifically for #content.

 

Example:

 

#contents {

width: 700px;

}

 

 

#contents p {

font-size: 11px;

line-height: 12px;

}

#contents ul {

list-style: none;

margin: 2px 0 3px 10px;

padding: 0;

}

#contents li {

margin: 0;

padding: 0;

font-size: 11px;

}

 

Now lets say you have a special page that is going to be just a tad different from the rest in which the only change you want to make is the #contents div's width from 700px to the new 600px width. You have two choices:

 

1. Duplicate all the css styles above and change the ID to be something different.

2. Just add a class to the existing #contents ID and set the width.

 

I prefer #2 because that way I don't have to duplicate a set of css styles twice. To achieve this you just simple add the class to the existing div that has the #contents ID like this:

 

 

And the only css you would need is this:

 

#contents.narrow {width: 600px;}

 

That css line has to come AFTER the #contents that has the 700px width in order for it to work.

 

This allows me to retain all the #contents styles except the new width of 600px that is superceded with #contents.narrow.

 

As it was stated here, you can use class more than once as well as having ID and class together. Even further, you can use multiples of classes within the same tag.

 

 

And example css style would be:

 

#contents.narrow { }

 

#contents.example{ }

 

#contents.more { }

 

#contents.narrow.example.more { }

 

Those are just a few examples.

Link to comment
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.
Note: Your post will require moderator approval before it will be visible.

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...