Page 1 of 1

How to align content with bottom of page with CSS

Posted: Thu Nov 04, 2004 10:19 am
by dardsemail
Hi,

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

Thanks!

Darlene

Posted: Thu Nov 04, 2004 10:26 am
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..

Posted: Thu Nov 04, 2004 1:22 pm
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.

Posted: Thu Nov 04, 2004 4:21 pm
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!

Posted: Thu Nov 04, 2004 4:24 pm
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 ;)

Posted: Thu Nov 04, 2004 5:39 pm
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.

Posted: Thu Nov 04, 2004 9:52 pm
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;

Posted: Thu Nov 04, 2004 11:54 pm
by Weirdan
isn't this is what you're looking for?

Posted: Fri Nov 05, 2004 3:28 pm
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!

Posted: Fri Nov 05, 2004 3:51 pm
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.

Posted: Mon Nov 08, 2004 12:46 pm
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 :-).

Posted: Sun Nov 14, 2004 8:27 pm
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!

Posted: Mon Nov 15, 2004 11:02 am
by vigge89
position: fixed; would be the solution if it worked in IE :S