Jump to content
dalawh

Appear at bottom + Align

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.

Share this post


Link to post
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?

Share this post


Link to post
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?
Is don't know how to do that. Do you?

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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?

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites
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).

Share this post


Link to post
Share on other sites

Does your page have <!DOCTYPE> declaration and is it valid HTML?

Share this post


Link to post
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?

Share this post


Link to post
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;

Share this post


Link to post
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 :)

Share this post


Link to post
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.

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