Page 1 of 1

footer position

Posted: Tue Dec 30, 2003 4:50 am
by ptysell
I am trying to get my footer DIV to align to the the bottom of the page.

This is the current setup i have:
<div id="container"></div>
<div id="something></div>
<div id-="something else></div>
</div>
ect.....

<div id="footer">

The footer will align to the bottom of the window(not document) with
position: absolute;
bottom: 0px;

I have also tried to put the footer into "container" but that did not help.

Thankls

Posted: Tue Dec 30, 2003 8:14 am
by McGruff
What happens when you remove all positioning from the footer div?

Posted: Tue Dec 30, 2003 7:06 pm
by ptysell
i have double checked my DIV open and closed tags. When i put the footer DIV in the body and not in the container div, the footer div positions its slef 100px from the top and i am unable to move it. I do have a div that is 100px from the top, but this should not effect where the footer.

I am really confused.

Should i just put the DIV into a table?
I am trying to avoide tables at all cost.

after looking on the internet i have seen that a lot of ppl have been having simular problems. All the solutions that i found did not work.

ill post my CSS and html code. It is not condenced so it is a little long.

Thanks

CSS

Posted: Tue Dec 30, 2003 7:07 pm
by ptysell

Code: Select all

----- NEED PHP INTIGRATION-----*/
body/*ASSIGNS BODY PROPERTIES TO THE BODY TAG*/
	{
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 0px;
	background-color: #346432;
	
	font-family: Arial, Helvetica, sans-serif; 
	font-weight: normal; 
	}
#page_container
	{
	top: 0px;
	left: 0px;
	}
	
.spesheadMENU_BLUE
	{
	background-color: #336699;
	}
	
/*-----------default link properties-----------*/
a:link
	{
	text-decoration: none;
	color: #000000;
	}
a:visited
	{
	text-decoration: none;
	color: #000000;
	}
a:hover
	{
	border-bottom: 1px solid;
	color: #336699;
	}
a:active
	{
	text-decoration: none;
	color: #000000;
	}
/*----------CONTENT BAR----------*/
.content_divider
	{
	padding-top: 0px;
	padding-bottom: 0px;
	padding-right: 0px;
	padding-left: 0px;
	
	background-color: #336699;
	border: #ffffff;
	border-style: solid;
	display: block;
	
	border-top-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-right-width: 0px;
	
	text-align: left;
	
	position: absolute;
	
	top: 300px;
	height: 25px;
	width: 800px;
	
	
	}
	



/*-----------HEADBOX "TOP OF BOXES"-----------*/
.headbox
	{
	font-weight: bold;
	text-decoration: none;
	font-size: 24;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #336699;
	color: #000000;
	border: #000000;
	display: block;
	
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 5px;
	padding-right: 2px;
	
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-width: 1px;
	border-style: solid;
	
	margin-top: 25px;
	margin-left: 20px;
	margin-right: 24px;
	
	width: 150px;
	text-align: left;
	}

/*-----------BOX LINKS----------*/
#content_menu
	{
	position: absolute;
	left: 25px;
	top: 0px;
	width: 200px;
	
	padding-top: 0px; 
	padding-right: 0px; 
	padding-bottom: 0px; 
	padding-left: 0px; 
	
	background-color: #ffffff;
	background-image: URL("assets/std/graystripes.gif");
	}
a.content_menu_links:link
	{
	font-weight : normal; 
	text-decoration: none;
	background-color: #ffffff;
	color: #000000;
	border: #000000;
	display: block; 
	
	padding-top: 2px; 
	padding-right: 2px; 
	padding-bottom: 2px; 
	padding-left: 5px; 
	
	border-top-width: 0px; 
	border-right-width: 1px; 
	border-bottom-width: 1px; 
	border-left-width: 1px; 
	border-style: solid;
	
	margin-left: 20px;
	margin-right: 24px;
	
	width: 150px; 
	text-align: left; 
	}
	
a.content_menu_links:visited
	{
	font-weight: normal; 
	text-decoration: none;
	background-color: #ffffff;
	color: #000000;
	border: #000000;
	display: block; 
	
	padding-top: 2px; 
	padding-right: 2px; 
	padding-bottom: 2px; 
	padding-left: 5px; 
	
	border-top-width: 0px; 
	border-right-width: 1px; 
	border-bottom-width: 1px; 
	border-left-width: 1px; 
	border-style: solid;
	
	margin-left: 20px;
	margin-right: 24px;
	
	width: 150px; 
	text-align: left;
	}
	
a.content_menu_links:hover
	{
	font-weight: normal; 
	text-decoration: none;
	background-color #ffffff;
	color: #336699;
	border: #000000;
	display: block; 
	
	padding-top: 2px; 
	padding-right: 2px; 
	padding-bottom: 2px; 
	padding-left: 5px; 
	
	border-top-width: 0px; 
	border-right-width: 1px; 
	border-bottom-width: 1px; 
	border-left-width: 1px; 
	border-style: solid;
	
	margin-left: 20px;
	margin-right: 24px;

	width: 150px; 
	text-align: left;
	}
	
a.content_menu_links:active
	{
	font-weight: normal; 
	text-decoration: none;
	background-color: #ffffff;
	color: #000000;
	border: #000000;
	display: block; 
	
	padding-top : 2px; 
	padding-right : 2px; 
	padding-bottom : 2px; 
	padding-left: 5px; 
	
	border-top-width: 0px; 
	border-right-width: 1px; 
	border-bottom-width: 1px; 
	border-left-width: 1px; 
	border-style: solid;
	
	margin-left: 20px;
	margin-right: 24px;
	
	width: 150px; 
	text-align: left;
	}
/*-----------NOTE: NOT SURE IF I SHOUDL USE CSS OR PHP/JAVA SCRIPT TO DO THIS....
#top_nav_bg
	{
	height: 100px;
	width: 800px;
	
	position: absolute;
	left: 0px;
	top: 0px;
	background-color: #336699;
	z-index: 1;
	}

#top_nav
	{
	position: abdolute;
	left: 0px;
	top: 25px;
	height: 25px;
	width: 800px;
	background-color: #ffffff;
	z-index: 10;
	}
*/	
#promo_content /*PROMO CONTENT*/
	{
	position: absolute;
	left: 0px;
	top: 100px;
	height: 225px;
	width: 800px;
	background-color: #000000;
	}
	
#promo_content_text/*SECTION TITLE*/
	{	
	position: absolute;
	top: 0px;
	left: 25px;

	
	height: 225px;
	width: 475px;
	
	
	color: #33ff22;
	background-color: #ff5522;
	}

#promo_content_img/*SECTION IMAGE*/
	{
	position: absolute;
	top: 0px;
	left: 500px;

	
	height: 225px;
	width: 275px;
	
	
	color: #33ff22;
	background-color: #447733;
	}
	
	
/*----------CONTENT----------I*/
#content
	{
	position: absolute;
	left: 0px;
	top: 325px;
	width: 800px;
	}
/*----------CONTENT TEXT----------*/
#content_text
	{
	position: absolute;
	left: 226px;
	top: 0px;
	width: 349px;
	
	padding-top: 0px; 
	padding-right: 0px; 
	padding-bottom: 0px; 
	padding-left: 0px;
	
	background-color: #ffffff;
	background-image: URL("assets/std/graystripes.gif");
	}
#content_text p
	{
	margin-top: 25px;
	margin-left: 25px;
	margin-right: 25px;
	}
	
	

/*----------CONTENT IMG----------*/	
#content_img
	{
	position: absolute;
	left: 575px;
	top: 0px;
	width: 200px;
	
	padding-top: 0px; 
	padding-right: 0px; 
	padding-bottom: 0px; 
	padding-left: 0px;
	
	background-image: URL("assets/std/graystripes.gif");
	background-color: #44ff99;

	}
/*FORMATTING OF IMAGES*/
#content_img p
	{
	margin-top: 25px;
	margin-left: 24px;
	margin-right: 24px;
	
	border-color: #000000;
	
	border-top-width: 1px; 
	border-right-width: 1px; 
	border-bottom-width: 1px; 
	border-left-width: 1px;
	display: block; 
	border-style: solid;
	}
#top_nav_bg
	{
	left: 0%;
	height: 100px;
	width: 800px;
	
	background-color: #66ff11;
	}
	
#footer
	{
	width: 800px;
	background-color: #224455;
	}

HTML

Posted: Tue Dec 30, 2003 7:11 pm
by ptysell

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
	<head>

		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<meta name="author" content="" />
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<meta name="robots" content="all" />
	
		<title>
			XHTML TEST
		</title>
	
		<link rel="stylesheet" href="xmlcss.css" type="text/css" />
	</head>

	<body>
	
		<div id="page_container">
		
			<div id="top_nav">
			
				<div id="top_nav_bg">
					&nbsp;
				</div>
				
			</div>
					
			<div id="promo_content">
			
				<div id="promo_content_text">
					PROMO CONTENT TEXT
				</div>
				
				<div id="promo_content_img">
					PROMO CONTENT IMG
				</div>
				
			</div>
			
			<div id="content_divider" class="content_divider">
				<table width="800px" border="0" cellspacing="0" cellpadding="0">
					<tr>
						<td class = "spesheadMENU_BLUE" width="24px" height="25px"><!--LEFT SPACER-->
						</td>
						<td width="1px" height="25px" bgcolor="#FFFFFF">
						</td>
						
						<td class = "spesheadMENU_BLUE" width="200" height="25px"><!--MENU COL-->
						</td>
						<td width="1" height="25px" bgcolor="#FFFFFF">
						</td>
						<td class = "spesheadMENU_BLUE" width="549" height="25px"><!--CONTENT COL-->
						</td>
						
						<td width="1" height="25px" bgcolor="#FFFFFF">
						</td>
						<td class = "spesheadMENU_BLUE" width="24px" height="25px"><!--RIGHT SPACER-->
						</td>
					</tr>
				</table>
			</div>
			
			<div id="content">
			
				<div id="content_menu">
				
					<div id="content_menu_headbox" class="headbox">
						<a href="section_name">SECTION NAME</a>
					</div>
					
					<a class="content_menu_links" href="ll" title="ll">&nbsp;Content_Menu</a>
					<a class="content_menu_links" href="ll" title="ll">&nbsp;Content_Menu</a>
					<a class="content_menu_links" href="ll" title="ll">&nbsp;Content_Menu</a>
					<a class="content_menu_links" href="ll" title="ll">&nbsp;Content_Menu</a>
					<a class="content_menu_links" href="ll" title="ll">&nbsp;Content_Menu</a>
					<a class="content_menu_links" href="ll" title="ll">&nbsp;Content_Menu</a>
					<a class="content_menu_links" href="ll" title="ll">&nbsp;Content_Menu</a>
				</div>
				
				<div id="content_text">
					<p class="p1">CONTENT</p>
					<p class="p2">CONTENT</p>
					<p class="p3">CONTENT</p>

				</div>
			
				<div id="content_img">
					<p class="p1"><img src="/assets/std/whitespacer.gif" height="120px" width="150px"></p>
					<p class="p2"><img src="/assets/std/whitespacer.gif" height="120px" width="150px"></p>
					<p class="p3"><img src="/assets/std/whitespacer.gif" height="120px" width="150px"></p>
				</div>
				
			</div>
			
	
		</div>
				<div id="footer">
				THIS IS WHERE THE FOOTER GOES
			</div>	
  	</body>
</html>

THANKS GUYS I HAVE NO IDEA WHY THIS IS NOT WORKING!!!

Posted: Tue Dec 30, 2003 7:26 pm
by ptysell
one of the things that i just noticed is that if i make my #top_nav bigger, then it will push the footer div down. what i do not understand is why this will push the footer down, but the content div will not,.

Posted: Tue Dec 30, 2003 7:38 pm
by microthick
if you are using absolute positioning for everything, the footer has nothing to base it's position against. and that's why it's not appearing at the bottom.

if you let everything fall relative to each other, then the footer will position itself properly.

Posted: Tue Dec 30, 2003 7:50 pm
by ptysell
well that works for an extent. All of the other cols not go

col 1
col 2
col 3

NOT
col1 col2 col3

Posted: Tue Dec 30, 2003 8:08 pm
by McGruff
To expand on the above comment, absolute positioning takes the element out of the normal document flow.

Posted: Tue Dec 30, 2003 8:21 pm
by microthick
To make columns adjacent to each other, learn to float the divs.

http://glish.com/css/2.asp
http://www.thenoodleincident.com/tutori ... boxes.html

Lots of examples to learn from.

Posted: Tue Dec 30, 2003 8:24 pm
by m3rajk
question: is 0,0 not the top left? i know using x,y coord normally starts at the top left., therefore wouldn't you want to use the users's bottom? (not sure how to gram that for the y value)