[SOLVED] How to align content with bottom of page with CSS

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
dardsemail
Forum Contributor
Posts: 136
Joined: Thu Jun 03, 2004 9:02 pm

How to align content with bottom of page with CSS

Post by dardsemail »

Hi,

Does anyone know the best way to align content with the bottom of a page using CSS?

Thanks!

Darlene
Draco_03
Forum Regular
Posts: 577
Joined: Fri Aug 15, 2003 12:25 pm
Location: Montreal, Canada

Post by Draco_03 »

8O ...

Dude, you have to make an effort or at least LOOK like your making one,..
Post the code and tell us what you tried..
rehfeld
Forum Regular
Posts: 741
Joined: Mon Oct 18, 2004 8:14 pm

Post by rehfeld »

search google, im positive you will find an enourmous amount of info on this.

and ill say this, it aint easy to do.
dardsemail
Forum Contributor
Posts: 136
Joined: Thu Jun 03, 2004 9:02 pm

Post by dardsemail »

Hi,

First - its 'Dudette' - not Dude.

Secondly, I have tried several options, but am just learning CSS. Here's my challenge. The content on the page is dynamically generated using PHP/MySQL. As a result, absolute positioning doesn't work. I'm thinking that I need to create a CSS for the body and then have the footer of the page be relatively positioned within.

I have done a Google search and none of the searches seem to address this particular challenge. I'll keep looking though.

Thought perhaps someone had seen this type of thing here. I guess not. When I find the solution, I'll be sure to post it!
Draco_03
Forum Regular
Posts: 577
Joined: Fri Aug 15, 2003 12:25 pm
Location: Montreal, Canada

Post by Draco_03 »

Can you post the code that you have ?
I'm visual so I can help better if I see what's the cpode of the dynamically generated page.

dudette ;)
User avatar
patrikG
DevNet Master
Posts: 4235
Joined: Thu Aug 15, 2002 5:53 am
Location: Sussex, UK

Post by patrikG »

The only way I found it working is using the bottom-attribute, e.g.:

Code: Select all

#corner_bottom_right{
	position: absolute;
	bottom: 0;
	right: 0;
	text-align: right;
	z-index: 4;
	visibility: visible;
}
Works in IE, Mozilla and Opera. Don't know about Safari or Konqueror.
dardsemail
Forum Contributor
Posts: 136
Joined: Thu Jun 03, 2004 9:02 pm

Post by dardsemail »

Okay - after some research and playing around, I managed to get the footer to stick to the bottom of the page, but the page (which should generally be about 600px in height) is now running about 1000px long requiring a scroll to see the footer. Keep in mind that I can't do an absolute page height as the content is dynamically generated.

I've attached the HTML code immediately below and the CSS following:

Code: Select all

<!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=iso-8859-1" />
<title>Avocado Atelier - Studio Collection</title>
	<link href="avocado.css" rel="stylesheet" type="text/css" />

	<script language="Javascript">
	
	function visible(id)
	&#123;
	id.style.visibility="visible";
	&#125;

	function hidden(id)
	&#123;
	id.style.visibility="hidden";
	&#125;

</script>
</head>
<body>
<div id="main">
<body onResize="window.location.reload()">
	<table border="0" cellpadding="0" cellspacing="0">
		<tr>
			<td><img id="watermark" src="images/avocadowatermark.gif" border="0">
			<img id="navlogo" src="images/avocadologo.gif"></div>
			</td>
		</tr>
	</table>
<hr id="hr" width="100%" color="#333333" size="1px">
<table id="topnav" width="800" align="center" cellspacing=0 cellpadding=0 border=0>
	<tr>
		<div class="navbar" onmouseover="visible(collection)"
onmouseout="hidden(collection)"><td width="10%" align="center">
		<a href="content.php?section=collection&subsection=atelier&page=atelier" onMouseOver="visible(collection)" onMouseOut="hidden(collection)"><img src="images/collections.gif" border="0"></a></td></div>
		<div class="navbar" onmouseover="visible(aboutus)"
onmouseout="hidden(aboutus)"><td width="10%" align="center">
		<a href="content.php?section=aboutav&subsection=aboutav&page=aboutav" onMouseOver="visible(aboutus)" onMouseOut="hidden(aboutus)"><img src="images/aboutus.gif" border="0"></a></td></div>
		<div class="navbar" onmouseover="visible(wellbeing)"
onmouseout="hidden(wellbeing)"><td width="10%" align="center">
		<a href="content.php?section=wellbeing&page=takingcare" onMouseOver="visible(wellbeing)" onMouseOut="hidden(wellbeing)"><img src="images/wellbeing.gif" border="0"></a></td></div>
		<div class="navbar" onmouseover="visible(press)"
onmouseout="hidden(press)"><td width="10%" align="center">
		<a href="content.php?section=press&subsection=avocadoinmedia&page=avocadoinmedia" onMouseOver="visible(press)" onMouseOut="hidden(press)"><img src="images/press.gif" border="0"></a></td></div>
		<td width="10%" align="center">
		<img src="images/fashionconsultants.gif" border="0"></td>
	</tr>
</table>
<div class="collection" id="collection" 
onmouseover="visible(collection)"
onmouseout="hidden(collection)">
<table cellpadding="2" cellspacing="2" border="0" summary="menu">
		<tr>
		<!-- Begin Cell -->

			<td nowrap="nowrap" bgcolor="#D9DECB" onmouseover="this.style.background='#435607'; this.style.color='#ffffff';" onmouseout="this.style.background='#D9DECB'; this.style.color=''" style="font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 12px; cursor: default;"
			onclick="window.location.href='content.php?section=collection&subsection=avfabrics&page=avfabrics'" title="Avocado Fabrics">Avocado Fabrics</td>
			</td>
		</tr><tr>
		<!-- Begin Cell -->

			<td nowrap="nowrap" bgcolor="#D9DECB" onmouseover="this.style.background='#435607'; this.style.color='#ffffff';" onmouseout="this.style.background='#D9DECB'; this.style.color=''" style="font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 12px; cursor: default;"
			onclick="window.location.href='content.php?section=collection&subsection=atelier&page=atelier'" title="Atelier Avocado Collection">Atelier Avocado Collection</td>
			</td>
		</tr><tr>
		<!-- Begin Cell -->

			<td nowrap="nowrap" bgcolor="#D9DECB" onmouseover="this.style.background='#435607'; this.style.color='#ffffff';" onmouseout="this.style.background='#D9DECB'; this.style.color=''" style="font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 12px; cursor: default;"
			onclick="window.location.href='content.php?section=collection&subsection=studio&page=studio'" title="Studio Collection">Studio Collection</td>
			</td>
		</tr><tr>
		<!-- Begin Cell -->

			<td nowrap="nowrap" bgcolor="#D9DECB" onmouseover="this.style.background='#435607'; this.style.color='#ffffff';" onmouseout="this.style.background='#D9DECB'; this.style.color=''" style="font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 12px; cursor: default;"
			onclick="window.location.href='content.php?section=collection&subsection=couture&page=couture'" title="Avocado Couture">Avocado Couture</td>
			</td>
		</tr>		<!-- End Cell -->
</table>
</div>

<div class="aboutus" id="aboutus" 
onmouseover="visible(aboutus)"
onmouseout="hidden(aboutus)">
<table cellpadding="2" cellspacing="2" border="0" summary="menu">
		<tr>
		<!-- Begin Cell -->

			<td nowrap="nowrap" bgcolor="#D9DECB" onmouseover="this.style.background='#435607'; this.style.color='#ffffff'" onmouseout="this.style.background='#D9DECB'; this.style.color=''" style="font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 12px; cursor: default;"
			onclick="window.location.href='content.php?section=aboutav&subsection=aboutav&page=aboutav'" title="About Avocado">About Avocado</td>
			</td>
		</tr>
		<tr>
		<!-- Begin Cell -->

			<td nowrap="nowrap" bgcolor="#D9DECB" onmouseover="this.style.background='#435607'; this.style.color='#ffffff'" onmouseout="this.style.background='#D9DECB'; this.style.color=''" style="font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 12px; cursor: default;"
			onclick="window.location.href='content.php?section=aboutav&subsection=avwoman&page=avwoman'" title="Avocado Woman">Avocado Woman</td>
			</td>
		</tr>
		<tr>
		<!-- Begin Cell -->

			<td nowrap="nowrap" bgcolor="#D9DECB" onmouseover="this.style.background='#435607'; this.style.color='#ffffff'" onmouseout="this.style.background='#D9DECB'; this.style.color=''" style="font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 12px; cursor: default;"
			onclick="window.location.href='content.php?section=aboutav&subsection=avprocess&page=avprocess'" title="Our Process">Our Process</td>
			</td>
		</tr>
		<tr>
		<!-- Begin Cell -->

			<td nowrap="nowrap" bgcolor="#D9DECB" onmouseover="this.style.background='#435607'; this.style.color='#ffffff'" onmouseout="this.style.background='#D9DECB'; this.style.color=''" style="font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 12px; cursor: default;"
			onclick="window.location.href='content.php?section=aboutav&subsection=avpeople&page=avpeople'" title="Meet Our People">Meet Our People</td>
			</td>
		</tr>
		<tr>
		<!-- Begin Cell -->

			<td nowrap="nowrap" bgcolor="#D9DECB" onmouseover="this.style.background='#435607'; this.style.color='#ffffff'" onmouseout="this.style.background='#D9DECB'; this.style.color=''" style="font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 12px; cursor: default;"
			onclick="window.location.href='content.php?section=aboutav&subsection=avcareers&page=avcareers'" title="Career Opportunities">Career Opportunities</td>
			</td>
		</tr>
		<tr>
		<!-- Begin Cell -->

			<td nowrap="nowrap" bgcolor="#D9DECB" onmouseover="this.style.background='#435607'; this.style.color='#ffffff'" onmouseout="this.style.background='#D9DECB'; this.style.color=''" style="font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 12px; cursor: default;"
			onclick="window.location.href='content.php?section=aboutav&subsection=avlocations&page=avlocations'" title="Locations">Locations</td>
			</td>
		</tr>
				<!-- End Cell -->
</table>
</div>

<div class="aboutus" id="wellbeing" 
onmouseover="visible(wellbeing)"
onmouseout="hidden(wellbeing)">
<table cellpadding="2" cellspacing="2" border="0" summary="menu">
		<tr>
		<!-- Begin Cell -->

			<td nowrap="nowrap" bgcolor="#D9DECB" onmouseover="this.style.background='#435607'; this.style.color='#ffffff'" onmouseout="this.style.background='#D9DECB'; this.style.color=''" style="font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 12px; cursor: default;"
			onclick="window.location.href='content.php?section=wellbeing&subsection=takingcare&page=takingcare'" title="Taking Care of Yourself">Taking Care of Yourself</td>
			</td>
		</tr>		<!-- End Cell -->
</table>
</div>

<div class="aboutus" id="press" 
onmouseover="visible(press)"
onmouseout="hidden(press)">
<table cellpadding="2" cellspacing="2" border="0" summary="menu">
		<tr>
		<!-- Begin Cell -->

			<td nowrap="nowrap" bgcolor="#D9DECB" onmouseover="this.style.background='#435607'; this.style.color='#ffffff'" onmouseout="this.style.background='#D9DECB'; this.style.color=''" style="font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 12px; cursor: default;"
			onclick="window.location.href='content.php?section=press&subsection=charitablefoundation&page=charitablefoundation'" title="The Avocado Fund for Women and Children">The Avocado Fund for Women and Children</td>
			</td>
		</tr>
		<tr>
		<!-- Begin Cell -->

			<td nowrap="nowrap" bgcolor="#D9DECB" onmouseover="this.style.background='#435607'; this.style.color='#ffffff'" onmouseout="this.style.background='#D9DECB'; this.style.color=''" style="font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 12px; cursor: default;"
			onclick="window.location.href='content.php?section=press&subsection=avocadoinmedia&page=avocadoinmedia'" title="Avocado in the Media">Avocado in the Media</td>
			</td>
		</tr>
				<!-- End Cell -->
</table>
</div>

<div id="fashcons">
</div><div id="content">
<table align="center" style="height:374px; vertical-align:top">
	<tr>
		<td height="20px" valign="top"><br /><h1>Studio Collection</h1>
		</td>
	</tr>
	<tr>	
		<td valign="top" align="justify">
						<h3><p>Avocado Studio is our collection of ready-to-wear leisure apparel. Designed with your needs in mind, each piece provides a combination of relaxed fit with elements of style and sophistication. Our Avocado Studio range is comfortable yet chic.
<p>The collection will take you from lounging around the house to running errands where looking good is important but being formally attired isnít a priority.
<p>Made from environmentally friendly natural fibers such as cotton and hemp, our pieces will provide you with wearable and washable (are the washable or are they dry clean only?) style. Our sumptuous soft fleece is made from 75% cotton and 25% Ecospunô created from recycled soda bottles.

</h3>
					</td>
	</tr>
</table>
</div>
	<div id="footerline">
	<hr width="100%" color="#000000" size="1px">
		<div id="footer">
			<br />
			<table border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td align="center"><h6><a href="fineprint?page=privacy">Privacy Statement</a> / Terms of Use / Investor Relations</h6>
					</td>
				</tr>
			</table>
			<br />
		</div>
	</div>
</div>
</body>
</html>
Here is the CSS:

Code: Select all

body &#123;
	background-color: #fffcf1;
	width: 100%;
	height: 100%;
	margin-left: 0px;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 0px;
&#125;

	.navbar
	&#123;
	position:absolute;
	top:0;
	left:0;	
	height:20;
	width:100;
	background-color:buttonface;
	font: 11px helvetica;
	padding: 3px;
	&#125;
	

	#main
	&#123;
	width: 100%;
	height: 100%;
	&#125;

	#collection &#123;
	position:absolute;
	top:180px;
	left:100px;
	width:100;
	background-color:#fffcf1;
	visibility:hidden;
	z-index:2;
		&#125;
		
	#aboutus &#123;
		position: absolute;
		top: 180px;
		left: 26%;
		width: 150px;
		border: 0;
		background: #fffcf1;
		padding: 3px;
		z-index: 2;
		visibility: hidden;
		&#125;
		
	  #wellbeing &#123;
		position: absolute;
		top: 180px;
		left: 38%;
		width: 150px;
		border: 0;
		background: #fffcf1;
		padding: 3px;
		z-index: 2;
		visibility: hidden;
		&#125;
		
	  #press &#123;
		position: absolute;
		top: 180px;
		left: 60%;
		width: 150px;
		border: 0;
		background: #fffcf1;
		padding: 3px;
		z-index: 2;
		visibility: hidden;
		&#125;
		
	  #fashcons &#123;
		position: absolute;
		top: 180px;
		left: 75%;
		width: 150px;
		border: 0;
		background: #fffcf1;
		padding: 3px;
		z-index: 2;
		visibility: hidden;
		&#125;
		
		#watermark
		&#123;
		position:absolute;
		width:800px;
		height:155px;
		margin:0 60px 0 60px;
		&#125;
		
		#navlogo
		&#123;
		position:absolute;
		margin-left:150px;
		margin-top:9px;
		&#125;
		
		#hr
		&#123;
		position:absolute;
		margin-top:155px;
		&#125;
		
		#topnav
		&#123;
		position:absolute;
		margin-left:70px;
		margin-top:170px;
		height:auto;
		&#125;
		
		#content
		&#123;
		position:absolute;
		width: 700px;
		margin-left:120px;
		margin-top:185px;
		&#125;
		
		#footerline
		&#123;
		position: absolute;
		bottom: 0;
		margin-left:0;
		width: 100%; /* See note below */
		text-align: center;
		width:100%;
		&#125;
		
		#footer
		&#123;
		margin-left:350px;
		&#125;

		.floatright &#123;
		float:right;
		margin:5px 0 10px 20px;
		&#125;
		
		.floatleft &#123;
		float:left;
		margin: 5px 20px 10px 0;
		&#125;
		
		.floatcenter &#123;
		float:inherit;
		margin: 5px 0 10px 20px;
		&#125;
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post by Weirdan »

isn't this is what you're looking for?
dardsemail
Forum Contributor
Posts: 136
Joined: Thu Jun 03, 2004 9:02 pm

Post by dardsemail »

Yes - that is. Unfortunately, when I tried to incorporate it into my code - it didn't work. Oh well. I think I've managed to work out something that seems to be a pretty good solution.

Thanks for your help though! I'll definitely work from that code on my next project!
rehfeld
Forum Regular
Posts: 741
Joined: Mon Oct 18, 2004 8:14 pm

Post by rehfeld »

i spent a looooonnnnnggg time trying to keep a footer on the bottom of the page, even when the content of the page wasnt enough to push the footer down, and to not make the page taller than the viewport(unless there was enough content to warrant it)

honestly, after weeks of trying, i came up with some solutions, but they were so dependant on tons and tons of hacks, i decided the best solution was to use a table to wrap the page. ugh, but it worked.
dardsemail
Forum Contributor
Posts: 136
Joined: Thu Jun 03, 2004 9:02 pm

Post by dardsemail »

Thanks. I may end up resorting to that too - which, incidentally, is how I had it in the first place but was trying to move away from that.

I will likely have to revert back to that as my current method works beautifully for IE, but not so well for Safari.

Thanks for the feedback! I think we can mark this as 'solved' (or at least semi-solved :-).
dardsemail
Forum Contributor
Posts: 136
Joined: Thu Jun 03, 2004 9:02 pm

Post by dardsemail »

Just an FYI for anyone looking to do this...

I found a nice thread on another location that had some great code that worked like a charm:

http://archivist.incutio.com/viewlist/ ... uss/24102

here's another nice one:


http://www.webmasterworld.com/forum83/501.htm


Though I have to admit that the latter worked well until I merged it with my code. The first one worked beautifully merged with my code.

I hate to point to other forums as this one is wonderful, but I though it might help someone down the line.

Cheers!
User avatar
vigge89
Forum Regular
Posts: 875
Joined: Wed Jul 30, 2003 3:29 am
Location: Sweden

Post by vigge89 »

position: fixed; would be the solution if it worked in IE :S
Post Reply