[SOLVED] How to align content with bottom of page with CSS
Moderator: General Moderators
-
dardsemail
- Forum Contributor
- Posts: 136
- Joined: Thu Jun 03, 2004 9:02 pm
How to align content with bottom of page with CSS
Hi,
Does anyone know the best way to align content with the bottom of a page using CSS?
Thanks!
Darlene
Does anyone know the best way to align content with the bottom of a page using CSS?
Thanks!
Darlene
-
dardsemail
- Forum Contributor
- Posts: 136
- Joined: Thu Jun 03, 2004 9:02 pm
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!
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!
The only way I found it working is using the bottom-attribute, e.g.:
Works in IE, Mozilla and Opera. Don't know about Safari or Konqueror.
Code: Select all
#corner_bottom_right{
position: absolute;
bottom: 0;
right: 0;
text-align: right;
z-index: 4;
visibility: visible;
}-
dardsemail
- Forum Contributor
- Posts: 136
- Joined: Thu Jun 03, 2004 9:02 pm
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:
Here is the CSS:
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)
{
id.style.visibility="visible";
}
function hidden(id)
{
id.style.visibility="hidden";
}
</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>Code: Select all
body {
background-color: #fffcf1;
width: 100%;
height: 100%;
margin-left: 0px;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 0px;
}
.navbar
{
position:absolute;
top:0;
left:0;
height:20;
width:100;
background-color:buttonface;
font: 11px helvetica;
padding: 3px;
}
#main
{
width: 100%;
height: 100%;
}
#collection {
position:absolute;
top:180px;
left:100px;
width:100;
background-color:#fffcf1;
visibility:hidden;
z-index:2;
}
#aboutus {
position: absolute;
top: 180px;
left: 26%;
width: 150px;
border: 0;
background: #fffcf1;
padding: 3px;
z-index: 2;
visibility: hidden;
}
#wellbeing {
position: absolute;
top: 180px;
left: 38%;
width: 150px;
border: 0;
background: #fffcf1;
padding: 3px;
z-index: 2;
visibility: hidden;
}
#press {
position: absolute;
top: 180px;
left: 60%;
width: 150px;
border: 0;
background: #fffcf1;
padding: 3px;
z-index: 2;
visibility: hidden;
}
#fashcons {
position: absolute;
top: 180px;
left: 75%;
width: 150px;
border: 0;
background: #fffcf1;
padding: 3px;
z-index: 2;
visibility: hidden;
}
#watermark
{
position:absolute;
width:800px;
height:155px;
margin:0 60px 0 60px;
}
#navlogo
{
position:absolute;
margin-left:150px;
margin-top:9px;
}
#hr
{
position:absolute;
margin-top:155px;
}
#topnav
{
position:absolute;
margin-left:70px;
margin-top:170px;
height:auto;
}
#content
{
position:absolute;
width: 700px;
margin-left:120px;
margin-top:185px;
}
#footerline
{
position: absolute;
bottom: 0;
margin-left:0;
width: 100%; /* See note below */
text-align: center;
width:100%;
}
#footer
{
margin-left:350px;
}
.floatright {
float:right;
margin:5px 0 10px 20px;
}
.floatleft {
float:left;
margin: 5px 20px 10px 0;
}
.floatcenter {
float:inherit;
margin: 5px 0 10px 20px;
}-
dardsemail
- Forum Contributor
- Posts: 136
- Joined: Thu Jun 03, 2004 9:02 pm
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.
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
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
.
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
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!
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!