Bottom-up build in CSS...
Posted: Sun Jun 19, 2005 1:20 pm
I'm working on a slightly complicated fluid layout, using several of the articles at A List Apart as a starting point. Most notably the article on Creating Liquid Layouts with Negative Margins.
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
The CSS floats the right/left pieces apporpriately and sets margins on the steps to keep in between the two. The borders/background on the step/steps make it look like a series of steps leading up to the content of the site.
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!
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!