[thelist] css bottom footer

Austin Harris austin at dotmail.co.uk
Wed Feb 21 16:42:24 CST 2007


It is possible, (I have *just* done it). As an aside I don't like it in usability terms but that's another story...

If you look here you can see it in action;
<http://londonfields.art-dept.org/projects/gastarbyter/index.php>

<div class="footerWrapper">
	<div class="footerContent">blah</div>
</div>


The css is fairly straightforward;

.footerWrapper {
	position: fixed;
	bottom: 0;
	width: 100%;
}

and then for IE6 only (via conditional statement);
html, body {
	height: 100%;
	overflow: auto;
}

div.footerWrapper {
	position: absolute;
	margin: 0 0 -1px -9px;
	bottom: 0;
}

The margins are a bit awkward for IE for some reason.

I'm not particularly happy with using it, but when a designer & client insist I can only try my hardest. It *HAS* got to be better than using frames...

Austin

----- "super super" <supercop at shaw.ca> wrote:
> I was thinking of doing this in CSS, but its too hard. Then I go back
> to table, and I still cannot figure out how to do this, would anybody
> know if this is possible?
> 
> I wanted to achieve something like a old style frame effect where a
> footer will always appeared at the bottom of the screen regardless how
> long/short the page. (not those 3 column css layout that the footer
> will expand if there is space) 
> 
> I managed to create something similar in IE by removing DTD and using
> table, but FF doesn't seem to like that idea,
> 
> http://www.rightertag.com.hk/test/a.html
> 
> Please show some light if anybody knows how it would work, coz I don't
> want to go back to frameset.
> 
> Thank you so much,
> 
> Stanley
> 
> 
> =============================================
> 
> <html>
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
> <style type="text/css">
> <!--
> html,body {
> 	margin:0;
> 	padding:0;
> 	height:100%; /* needed for container min-height */
> 	background:gray;
> 	
> 	font-family:arial,sans-serif;
> 	font-size:small;
> 	color:#FFFFFF;
> }
> .content {
> 	overflow: scroll;
> 	height:auto !important; /* real browsers */
> 	height:100%; /* IE6: treaded as min-height*/
> 	min-height:100%; /* real browsers */
> 	margin: 0px;
> 	padding: 0px;
> }
> .aaa {
> 	overflow: hidden;
> }
> p {
> 	font-size: 76px;
> 	margin: 10px;
> 	padding: 10px;
> }
> -->
> </style>
> </head>
> 
> <body>
> <table width="1004" height="100%" border="0" align="center"
> cellpadding="0" cellspacing="0">
>   <tr valign="top">
>     <td height="110">logo & header</td>
>   </tr>
>   <tr valign="top">
>     <td height="100%" nowrap class="aaa"><div class="content">
> <p> main content </p>
> <p> main content </p>
> <p> main content </p>
> <p> main content </p>
> <p> main content </p>
> <p> main content </p>
> <p> main content </p>
> <p> main content </p>
> </div></td>
>   </tr>
>   <tr valign="top">
>     <td height="28">Footer</td>
>   </tr>
> </table>
> </body>
> </html>
> -- 
> 
> * * Please support the community that supports you.  * *
> http://evolt.org/help_support_evolt/
> 
> For unsubscribe and other options, including the Tip Harvester 
> and archives of thelist go to: http://lists.evolt.org 
> Workers of the Web, evolt !




More information about the thelist mailing list