dalawh Posted June 4, 2012 Share Posted June 4, 2012 How do I make something appear at the bottom most parts of the page? What I mean is if I wanted to add a footer, I would want it to be at the bottom at all times no matter how the page is changing. I was wondering how I would align something in the center. Like if I wanted to align a div or table in the center, but not the text itself. I know I can use text-align:center, but that just seems weird and I tried align:center, but I am not sure if that is right. Link to comment Share on other sites More sharing options...
niche Posted June 4, 2012 Share Posted June 4, 2012 A short answer would be to create a div structure that has a div permanently positioned at the bottom of the screen that holds your footer. Have/can you create such a structure? Link to comment Share on other sites More sharing options...
dalawh Posted June 4, 2012 Author Share Posted June 4, 2012 A short answer would be to create a div structure that has a div permanently positioned at the bottom of the screen that holds your footer. Have/can you create such a structure?Is don't know how to do that. Do you? Link to comment Share on other sites More sharing options...
niche Posted June 4, 2012 Share Posted June 4, 2012 (edited) Absolutely and so should you. It's easy. Put two divs inside a div based on this ref and post your code. http://www.w3schools...ags/tag_div.asp You'll get all the polite help you need provided you try. Don't expect to be given the answer unless you attempt and answer first and posting your effort in a code box. Hint: Give your divs height, width and color so you can see them. Edited June 4, 2012 by niche Link to comment Share on other sites More sharing options...
dalawh Posted June 4, 2012 Author Share Posted June 4, 2012 Absolutely and so should you. It's easy. Put two divs inside a div based on this ref and post your code. http://www.w3schools...ags/tag_div.asp You'll get all the polite help you need provided you try. Don't expect to be given the answer unless you attempt and answer first and posting your effort in a code box. Hint: Give your divs height, width and color so you can see them.I think there has been a misunderstanding. I am looking for something that stays at the bottom of the page. I do know how to create divs. I don't know how to make stay at the bottom. Link to comment Share on other sites More sharing options...
niche Posted June 4, 2012 Share Posted June 4, 2012 If you want the div, or any other element to stay at the bottom, you have to place something above it to keep it there (other elements, margin, etc). It might be best to post the relevant code that describes your situation. Link to comment Share on other sites More sharing options...
Ingolme Posted June 4, 2012 Share Posted June 4, 2012 I think what you're looking for is a "sticky footer" http://ryanfait.com/sticky-footer/ It will stay at the bottom, and when the content extends beyond the bottom of the window the footer will move with it. Link to comment Share on other sites More sharing options...
dalawh Posted June 4, 2012 Author Share Posted June 4, 2012 If you want the div, or any other element to stay at the bottom, you have to place something above it to keep it there (other elements, margin, etc). It might be best to post the relevant code that describes your situation.That only works if your page is bigger than the screen. If the content fits in the screen area, that div will float to the middle/top. I think what you're looking for is a "sticky footer" http://ryanfait.com/sticky-footer/ It will stay at the bottom, and when the content extends beyond the bottom of the window the footer will move with it.Does that stretch the page so that it is always at least the size of the screen causing the footer to always be at the bottom? Link to comment Share on other sites More sharing options...
Ingolme Posted June 4, 2012 Share Posted June 4, 2012 Does that stretch the page so that it is always at least the size of the screen causing the footer to always be at the bottom?That's exactly what it's designed for. Link to comment Share on other sites More sharing options...
dalawh Posted June 4, 2012 Author Share Posted June 4, 2012 I think what you're looking for is a "sticky footer" http://ryanfait.com/sticky-footer/ It will stay at the bottom, and when the content extends beyond the bottom of the window the footer will move with it.Not sure if I am doing it wrong, but no matter how small the page is, it always goes over a screen (meaning their is a scroll bar). Link to comment Share on other sites More sharing options...
Ingolme Posted June 4, 2012 Share Posted June 4, 2012 Does your page have <!DOCTYPE> declaration and is it valid HTML? Link to comment Share on other sites More sharing options...
dalawh Posted June 4, 2012 Author Share Posted June 4, 2012 Does your page have <!DOCTYPE> declaration and is it valid HTML? Yes and yes, I believe.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><title>TITLE</title><link rel="stylesheet" type="text/css" href="ToSstylesheet.css"/><meta name="description" content="..."/><script type="text/javascript" src="ToSScript.js"></script></head><html><body> <div id="container"> <div id="header"> <img src="images/logo.png" alt="dalawh"/> </div> <br /> <div id="title"><h3>Header</h3></div> <div id="content_body"> <div id="content_text"> <br /> <textarea>BLAH BLAH </textarea readonly="readonly"> <br /> <form name="ToSForm" action="ToS.php" onsubmit="return validateForm()" method="post"> First Name: <input type="text" name="first" /><br /> Last Name: <input type="text" name="last" /><br /> <input type="checkbox" name="ToS1" value="ToS1" onclick="showSubmit()" />Boo<br /> <input type="checkbox" name="ToS2" value="ToS2" onclick="showSubmit()" />Boo<br /> <input type="checkbox" name="ToS3" value="ToS3" onclick="showSubmit()" />Boo<br /> <div id="enter"></div><br /> </form> </div> </div> </div> <br /> <footer> FOOTER </footer></body></html> ToSstylesheet.css html{height: 100%;}body{ /* General background */background-color:#4281BC;height: 100%;margin:0px auto;}form{background-color:#FFFFFF;width:90%;text-align:left;margin:0px auto;}h3{color:#FFFFFF;padding:2px 10px;margin:0px auto;}textarea{background-color:#F6F6F6;width:90%;height:200px;padding:10px;margin:0px auto;}footer{background-color:#204066;text-align:right;height: 4em;padding:10px;}#header{ /* Logo */margin:0px auto;}#container{min-height: 100%;height: auto !important;height: 100%;margin:0px auto -4em;}#title{background-color:#204066;width:80%;margin:0px auto;}#content_body{width:80%;margin:0px auto;}#content_text{background-color:#FFFFFF;text-align:center;margin:0px auto;}#enter{background-color:#FFFFFF;width:90%;text-align:center;margin:0px auto;} Did I do anything wrong? Link to comment Share on other sites More sharing options...
Ingolme Posted June 4, 2012 Share Posted June 4, 2012 I believe you're missing the "push" <div> that they explained on this page: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ Link to comment Share on other sites More sharing options...
dsonesuk Posted June 4, 2012 Share Posted June 4, 2012 The #container height will fill the entire height of browser window because of min-height:100%; and the footer will be below this as it on the outside below the container element.You have to use margin-top: minus the height of the footer, you have made this difficult using em plus padding unit of px, if could lose the padding, or convert to all pixel unit it would be easier. example if 100px + padding top and bottom (20px) you would use margin-top: - 120px; to force it to come into view and overlap #container.Now you have to allow for this overlap with the content or it will disappear under the footer, by given the #content_body OR content_text a padding-bottom: of the same value used for margin-top of footer ie padding-bottom: 120px; Link to comment Share on other sites More sharing options...
dalawh Posted June 5, 2012 Author Share Posted June 5, 2012 The #container height will fill the entire height of browser window because of min-height:100%; and the footer will be below this as it on the outside below the container element. You have to use margin-top: minus the height of the footer, you have made this difficult using em plus padding unit of px, if could lose the padding, or convert to all pixel unit itwould be easier. example if 100px + padding top and bottom (20px) you would use margin-top: - 120px; to force it to come into view and overlap #container. Now you have to allow for this overlap with the content or it will disappear under the footer, by given the #content_body OR content_text a padding-bottom: of the same value used formargin-top of footer ie padding-bottom: 120px;Thanks a lot. Everything solved Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now