Getting down footers is rocket science :) If the height of your if fix, you should check this out: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
<http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page>Best regards, Martin 2010/3/23 command0 <[email protected]> > Hi everyone, > > I am in some serious need of some insight on a problem I'm having. I > have a web application I am nearly finished with, and am at the point > where I am styling everything, and getting the overall interface of > the application professional looking, and presentable. > > I have everything else complete, except for one thing; the footer. > > Being the content of the application is dynamic, and get's queried > from a database, and rendered on the page, the height of any given > page could vary. I limit the height of certain pages to an extent > using pagination to limit how many records can be rendered, but > regardless, I need a dynamic solution. > > As far as what matters here, the HTML, this is what I have. > > -------------------------------- > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> > > <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"> > <head> > <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> > <title>Student Help Portal</title> > <%= stylesheet_link_tag 'scaffold', 'style' %> > <%= init_tinymce_hammer_if_required %> > </head> > <body> > > <div id="container"> > > <div id="head"> > > <div class="head"> > > </div><!-- End .Head --> > > <div class="head"> > > <h2>Student Help Portal</h2> > > > </div><!-- End .Head --> > > <div class="head"> > > <div id="headinfo"> > > > </div><!-- End Headinfo --> > > </div><!-- End .Head --> > > </div><!-- End #Head --> > > <div id="content"> > > </div><!-- End Content --> > > > </div><!-- End Container --> > > <div id="footer"> > > </div><!-- End Footer --> > > > </body> > </html> > > ----------------------------------------------- > > Here is the CSS for this divs and such: > > ------------------------------------------------- > > * { > margin: 0; > padding: 0; > } > > html, body { > height: 100%; > min-height: 100%; > } > h1 { > text-align: center; > } > h2 { > font-family: verdana; > font-size: 36pt; > } > > #container { > position: relative; > min-height: 100%; > margin-left: auto; > margin-right: auto; > margin-bottom: -50px; > } > > * html #container { > height: 100%; > } > > #head { > background-color: #cccccc; > width: 100%; > height: 140px; > } > .head { > float: left; > } > > #headinfo { > width: 200px; > text-align: right; > margin-right: 10px; > > } > > #content { > /* position: absolute; > top: 140px; > left: 0; > width: 100%; */ > padding-bottom: 9em; > } > > #footer { > position: relative; > /* top: -5%; > height: 50px; */ > margin-top: -7.5em; > background-color: #ffffcc; > } > > ---------------------------------- > > Basically what happens is, the footer goes near the bottom, but not > quite, and will not "budge" at all. Here is a screenshot of what I > mean: http://justinbrinkerhoff.info/img/helpdesk_footer_bottom.png > > When I set the height on the footer, it is not visible at all, hence > why I had height temporarily commented out. > > If I take a similar approach, I end up with the footer at the "bottom" > when the page is first loaded, but after you scroll down, it does not > move at all. Here is a screenshot of that: > http://justinbrinkerhoff.info/img/helpdesk_floating_footer.png > > I am using Firefox 3.6, so I don't know why something that should at > minimum, work with at Netscape based browser like Firefox. > > I have tried tutorials at: > > http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css/ > http://www.themaninblue.com/writing/perspective/2005/08/29/ > http://csscreator.com/node/4104 > > None of which has really helped. They are all in essence, following > the same approach with some subtle differences. But for whatever > reason, this is just not working for me. I wished I knew why... > > In any case, if someone could help me straighten out this strange > footer problem, I would be beyond grateful. > > Thanks in advance for all your help. > > -- > -- > You received this because you are subscribed to the "Design the Web with > CSS" at Google groups. > To post: [email protected] > To unsubscribe: [email protected] > > To unsubscribe, reply using "remove me" as the subject. > -- -- You received this because you are subscribed to the "Design the Web with CSS" at Google groups. To post: [email protected] To unsubscribe: [email protected]
