Sent by Charlie Kalech on 20 November 2002 15:03
I am trying to create a page with two columns and a footer. I can not
get the footer to be positioned at the bottom of the page! I have
looked at many resources and I have tried several methods. This is my
first stylesheet and I am beginning to thing that there are
advantages to using tables for layout. I present them here for some
desperately needed help.
Thanks in advance!
Charlie
The complete stylesheet is located at
http://alliancedata.org.il/pardes/pardesglobal.css
I have made different DIV ids trying to make position the footer in
different was as follows.
I have included links to the HTML versions below:
First I thought I could position the footer relatively and just clear
everything, similar to a <BR CLEAR=ALL> in HTML
DIV#leftnavbar { position : absolute;
left : 0px;
width : 165px;
padding-top : 30px;
padding-right: 30px}
DIV#main { position : absolute;
left : 195px;
width : 524px;}
DIV#footerclear { position: relative;
clear : both;
width: 100%;
text-align: center;}
The footer appears above both DIVs of the two column layout. You can
view it and retrieve the source from
http://alliancedata.org.il/pardes/site2003/testcss/footerclear but
here is an abbreviated version:
<div id="leftnavbar">
<!--LEFT NAVBAR-->
(I didn't put all the graphics in to save space in
this posting)
</div>
<DIV id="main">
<!-- PAGE TITLE -->
<P CLASS="pagetitle">Pardes Fellows</p>
</DIV>
<DIV id="footerclear">
<P>Footer</P>
</DIV>
Then I tried padding-top: 100% hoping that it would put the padding
at 100% of the page, but it puts the footer way below the content
DIV#footerpad { position: absolute;
padding-top: 100%;
width: 100%;
text-align: center;}
http://alliancedata.org.il/pardes/site2003/testcss/footerpad
Then I tried the other way
DIV#footerbtm {position : absolute;
bottom: 0;
width: 100%;
text-align: center;}
seems to set the footer at the bottom of the browser's screen, but
then it scrolls up when if the content is longer than one screen
http://alliancedata.org.il/pardes/site2003/testcss/footerbtm
Finally I tried vertical-align: bottom which also did not work.
DIV#footervalign { position: absolute;
vertical-align: bottom;
width: 100%;
text-align: center;}
http://alliancedata.org.il/pardes/site2003/testcss/footervalign
Any suggestions?
Thanks
Charlie
_______________________________________________
css-discuss [EMAIL-REMOVED]]
http://two.pairlist.net/mailman/listinfo/css-discuss
Sponsored by www.westciv.com - CSS resources | software | learning
