Jump to content

Appear at bottom + Align


dalawh
 Share

Recommended Posts

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

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

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 by niche
Link to comment
Share on other sites

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

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

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

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

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...