954,598 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article
3 Years Ago
0

bottom: 0px doesn't get the div to the bottom

hi, is there a way that i can take my div to the bottom center of my page? i tried diff attempts but none worked. any suggestion? thanks.

below is my last attmep: 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="xsoldier2006" content="xsoldier2006, 2006, xsoldier" />
<title>HENRY's IT notes</title>
<link href="../css/itCss.css" rel="stylesheet" type="text/css" />
</head>

<style type="text/css">

#wrapper
{
  position: relative;
  width: 800px;
}

#menu
{
   position: relative;
   width: 800px;
   height: 100px;
   background: url(../image/midBox.png);
}

#textBox
{
   position: relative;
}

#footer
{
	position:absolute;
	margin-bottom: 0px; 
}




</style>



<body bgcolor="#333333" text="#CCCCCC">

	<div class="bxcen" id="wrapper">
		
        <img src="../image/tech.jpg" alt="tech.jpg" />
        <div class="bxcen" id="menu">
        	<table border="0" align="center" height="80" cellspacing="10">
        		<tr>
            		<td><a href="../index.php">Home</a></td>
                	<td></td>
            		<td><a href="network.php">Network</a></td>
                	<td></td>
        			<td><a href="java.php">Java </a></td>
                	<td></td>
                    <td><a href="cSharp.php">C#</a></td>
                    <td></td>
                    <td><a href="c++.php">C++ </a></td>
                    <td></td>
                    <td><a href="perl.php">Perl</a></td>
                    <td></td>
                    <td><a href="php.php">Php </a></td>
                    <td></td>
                    <td><a href="shellscript.php">Shell Script</a></td>
                    <td></td>
                	<td><a href="unix.php">*nix</a></td>
                    <td></td>
                    <td><a href="web.php">Web Design</a></td>
                    <td></td>
                    <td><a href="database.php">Database+SQL </a></td>
                    <td></td>
                    <td><a href="other.php">Else</a></td> 
            	</tr>
        	</table>
        </div> <!-- end menu div -->
        
        <div class="bxcen" id="textBox">
        	
            <hr width="800" />
            
            
            
            
            
            <p>****************************************************************************************************</p>
            <p align="center">Note: All the programming codes and information are for my own reference only</p>
            <p align="center">Note: All information is for studying purpose only</p>
            <p align="center">Note: Displaying programming codes should not be copied and used without permission</p>
         
            <p>****************************************************************************************************</p>
              
       	</div> <!-- end textbox div -->
       
     	<div id="footer">
			<p align="center"><font size="-1"> @2009 xsoldier2006.com | Site design and development by Henry Li | Graphic Design by Wendy Wong</font></p>
		</div>
     
       
       
</div> <!-- main div end -->

	



</body>
</html>
k2k
Posting Whiz
352 posts since Nov 2007
Reputation Points: 15
Solved Threads: 1
 
3 Years Ago
0
#footer { position:absolute; margin-bottom: 0; }


zero works without em,px,%,pt

almostbob
Posting Sensei
3,149 posts since Jan 2009
Reputation Points: 571
Solved Threads: 376
 
3 Years Ago
0

There is no way to put it at the bottom of the screen that works with all browsers.

MidiMagic
Nearly a Senior Poster
3,319 posts since Jan 2007
Reputation Points: 730
Solved Threads: 182
 
3 Years Ago
0

or just 

bottom:0;
almostbob
Posting Sensei
3,149 posts since Jan 2009
Reputation Points: 571
Solved Threads: 376
 
3 Years Ago
0

Use frameset.

__avd
Posting Genius (adatapost)
Moderator
8,648 posts since Oct 2008
Reputation Points: 2,136
Solved Threads: 1,243
 
2 Years Ago
0

A thought
you have your footer wrapped in and



by default has a margin
try(code snipped)

<style type='text/css'>
<!--
#footer { position:absolute; bottom:0; text-align:center; font-size:85%; width: 100%; }
-->
</style>
<div id="footer">&copy;2009 xsoldier2006.com | Site design and development by Henry Li | Graphic Design by Wendy Wong</div>
almostbob
Posting Sensei
3,149 posts since Jan 2009
Reputation Points: 571
Solved Threads: 376
 
2 Years Ago
0

The reason you can't do it is that the Internet is not designed around a browser window (which can change size and aspect ratio over a large range). It is designed to start at the top, and expand downward until all of the content is rendered.

Anyone who tries to make a page exactly fit the browser window is wasting his time.

There is no reliable way to do it that works on all browsers. On many browsers, height and bottom refer to the bottom of the content, not the bottom of the browser window. If you want a footer at the bottom of a page, then create the page in Word, and print it on a sheet of paper.

.

MidiMagic
Nearly a Senior Poster
3,319 posts since Jan 2007
Reputation Points: 730
Solved Threads: 182
 
2 Years Ago
0

I just thought of a way you can cheat. But it requires the user to change a setting on his browser:

- Create your page in word.

- Somewhere in the page, instruct the user to set his browser so it shrinks oversize images to fit in the browser window.

- Display the entire page on your monitor.

- Take a screenshot of it.

- Paste the screenshot into any art program.

- Save it as a .jpg file.

- Place the file in your web page as the only object.

The drawback is that you can't have any reliably placed links on the page.

(Note that this is not intended as a serious solution. It is the only thing that I know if that works on most browsers. A serious solution is to leave enough unused space at the bottom of the content, so it stays within one screen on most monitors.)

MidiMagic
Nearly a Senior Poster
3,319 posts since Jan 2007
Reputation Points: 730
Solved Threads: 182
 
2 Years Ago
0
A thought

Anotherthought
to be dynamaiclly positioned at the bottom of the window the footer has to be rendered first, before the body test that may otherwise push it down
all proper html ignored

<div header>
<div footer>
<div the rest>

the prior code code posted works in ie7,8 ff2,3 opera

almostbob
Posting Sensei
3,149 posts since Jan 2009
Reputation Points: 571
Solved Threads: 376
 
2 Years Ago
0

I tried that last code. As written, it put the footer to the left of the header.

The margin-bottom style and the bottom style are two very different things. Margin-bottom put the footer to the left of the header. Bottom put it at the bottom of the screen in IE and FF, but not in some other browsers.

Then I messed around with it a bit (using bottom), and got it to put the text at the bottom, but not in the center.

It does not seem to work correctly with XHTML strict. The centered text is off to the right of center in both IE and FF browsers. Then, when I try to close the IE browser, it crashes with an "IE encountered a problem and needs to close" error.

This code is definitely a kludge that is not an intended use.

It also won't work if the content is too large for the screen (remember that the browser window might be restored down, on a low resolution screen, or on a 16x9 aspect ratio screen). The footer appears superimposed on top of other page contents when that happens.

MidiMagic
Nearly a Senior Poster
3,319 posts since Jan 2007
Reputation Points: 730
Solved Threads: 182
 

This article has been dead for over three months

Post: Markdown Syntax: Formatting Help
You
 
© 2012 DaniWeb® LLC
Home | About Us | Contact Us | Terms of Service | Advertising Opportunities
RSS Feed RSS Feed