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

Question

k2k 5 Posting Whiz

15 Years Ago

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" />
            <br />
            <br />
            <br />
            <br />
            
            <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>

web-design

4 Contributors
9 Replies
930 Views
5 Days Discussion Span
Latest Post 15 Years Ago Latest Post by MidiMagic

almostbob 866 Retired: passive income ROCKS

15 Years Ago

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

zero works without em,px,%,pt

MidiMagic 579 Nearly a Senior Poster

15 Years Ago

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

almostbob 866 Retired: passive income ROCKS

15 Years Ago

or just

bottom:0;

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

kvprajapati 1,826 Posting Genius Team Colleague · Answer 1 · 2009-06-04T16:25:02+00:00

kvprajapati 1,826 Posting Genius

15 Years Ago

Use frameset.

almostbob 866 Retired: passive income ROCKS · Answer 2 · 2009-06-04T21:51:42+00:00

A thought
you have your footer wrapped in <p> and <div>
by default <p> 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>

MidiMagic 579 Nearly a Senior Poster · Answer 3 · 2009-06-05T09:42:53+00:00

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 579 Nearly a Senior Poster · Answer 4 · 2009-06-05T09:50:03+00:00

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

almostbob 866 Retired: passive income ROCKS · Answer 5 · 2009-06-05T09:56:22+00:00

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

MidiMagic 579 Nearly a Senior Poster · Answer 6 · 2009-06-05T10:06:43+00:00

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.