I'm slightly extending it, to use the same fluid effects in both the header and footer -- to allow the header and footer to "cap" the custom full content height backgrouns in the right/left columns. Everything is working rather nicely so far. However I'm having a small problem in my footer and I'm not sure how to fix it, or even if its fixable.
So the footer has three pieces
Code: Select all
<div id="e;footer"e;>
<div class="e;left-footer"e;>
<div class="e;copyright"e;>yadda yadda yadda</div>
</div>
<div class="e;right-footer"e;> </div>
<div class="e;steps"e;>
<div class="e;step"e;>Hello, welcome...</div>
<div class="e;step"e;>For more info, go to...</div>
<div class="e;step"e;>This site inspired by...</div>
</div>
</div>THe problem is that I would like to align the block of steps with the bottom of the footer, instead of the top. I can't just push it down with margins, because that is then fixing the layout out based on a paticular combination of font-size and browser width.
I've tried absolutely positioning the footer at the bottom and the relatively positioning the steps/step at the bottom of their container, without success. Likweise with the vertical-align property.
Any suggestions. sticking to CSS1 or common features of CSS2?
Thanks!