DIV on Bottom of Page

**tech_support** · 06-02-2006, 12:25 AM

Does anyone know how to put a <div> on the very bottom of the page? (Like http://ideas.live.com/ when you sign in)

Thanks in advance!

**Jack** · 06-02-2006, 12:41 AM

Do you mean something that brings you back at the top of the page when you click on it?

**tech_support** · 06-02-2006, 12:48 AM

No,

Like some kind of bar on the bottom of the page. (Using div's not frames)

You should see the page i was talking about! Then you'd understand what i meant

**jscheuer1** · 06-02-2006, 03:31 AM

No javascript required. As long as you don't have other content on your page positioned absolutely in such a way as it confuses the browser as to the true height of your page, something like so will work just fine:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<div style="position:absolute;bottom:0;">Hi</div>
</body>
</html>

**tech_support** · 06-02-2006, 06:44 AM

Thanks!

How about the centre of the page?

**jscheuer1** · 06-02-2006, 06:58 AM

That's a little more complicated, this is the best primer that I've seen on that. The styling is a bit more complex than required but, it is that way to cover all possible situations:

http://www.wpdfd.com/editorial/thebox/deadcentre4.html

Use your browser's view source to see the code and read the text on the page for hints as to how to adapt it to any particular content.

**tech_support** · 06-02-2006, 07:35 AM

**Scratches Head**

Can't seem to get it working

Here's the code: Maybe you should try

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
		<title>Dead Centre</title>
		<style type="text/css" media="screen"><!--
body 
	{
	color: white;
	background-color: #003;
	margin: 0px
	}

#horizon        
	{
	color: white;
	background-color: transparent;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	height: 1px;
	overflow: visible;
	visibility: visible;
	display: block
	}

#content    
	{
	font-family: Verdana, Geneva, Arial, sans-serif;
	background-color: transparent;
	margin-left: -125px;
	position: absolute;
	top: -35px;
	left: 50%;
	width: 250px;
	height: 70px;
	visibility: visible
	}

.bodytext 
	{
	font-size: 14px
	}

.headline 
	{
	font-weight: bold;
	font-size: 24px
	}

#footer 
	{
	font-size: 11px;
	font-family: Verdana, Geneva, Arial, sans-serif;
	text-align: center;
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 20px;
	visibility: visible;
	display: block
	}

a:link, a:visited 
	{
	color: #06f;
	text-decoration: none
	}

a:hover 
	{
	color: red;
	text-decoration: none
	}

--></style>
	</head>

	<body>
		<div id="horizon">
			<div id="content">
				<div class="bodytext">
					This text is<br>
					<span class="headline">DEAD CENTRE</span><br>
					and stays there!</div>
			</div>
		</div>
		<div id="footer">
			<a href="deadcentre4.html">view construction</a></div>
	</body>

</html>

And the second page:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
		<title>Dead Centre</title>
		<style type="text/css" media="screen"><!--
body 
	{
	color: white;
	background-color: #003;
	margin: 0px
	}

#content     
	{
	font-family: Verdana, Geneva, Arial, sans-serif;
	background-color: #f00;
	text-align: center;
	margin-top: -35px;
	margin-left: -125px;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 250px;
	height: 70px;
	visibility: visible
	}

.bodytext 
	{
	font-size: 14px
	}

.headline 
	{
	font-weight: bold;
	font-size: 24px
	}

#footer 
	{
	font-size: 11px;
	font-family: Verdana, Geneva, Arial, sans-serif;
	text-align: center;
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 20px;
	visibility: visible;
	display: block
	}

a:link, a:visited 
	{
	color: #06f;
	text-decoration: none
	}

a:hover 
	{
	color: red;
	text-decoration: none
	}

.captions  
	{
	color: white;
	font-size: 10px;
	line-height: 14px;
	font-family: Verdana, Geneva, Arial, sans-serif;
	text-align: left
	}

#caption1     
	{
	padding-left: 6px;
	border-top: 1px dashed #66c;
	position: absolute;
	top: 50%;
	left: -180px;
	width: 150px;
	height: 120px;
	visibility: visible;
	display: block
	}

#caption2    
	{
	padding-left: 6px;
	border-left: 1px dashed #66c;
	position: absolute;
	top: 92px;
	left: 125px;
	width: 250px;
	height: auto;
	visibility: visible;
	display: block
	}

--></style>
	</head>

	<body>
		
			<div id="content">
				<div class="bodytext"><div id="caption1" class="captions">&nbsp;<br>The red 'content' box is 250px wide, 70px high and is positioned absolutely 50% from the top - but it is given a negative top margin that is exactly half of its height, -35px. .</div>
					This text is<br>
					<span class="headline">DEAD CENTRE</span><br>
					and stays there!
					<div id="caption2" class="captions">To get it to centre horizontally, it is positioned 50% from the left and has a negative left margin that is exactly half of its width, -125px.</div>
				</div>
			</div>
		
		<div id="footer">
			<a href="deadcentre1.html">
			back</a></div>
		
	</body>

</html>