Page 1 of 1

Bottom-up build in CSS...

Posted: Sun Jun 19, 2005 1:20 pm
by nielsene
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

Code: Select all

<div id=&quote;footer&quote;>
  <div class=&quote;left-footer&quote;>
    <div class=&quote;copyright&quote;>yadda yadda yadda</div>
  </div>
  <div class=&quote;right-footer&quote;>&nbsp;</div>
  <div class=&quote;steps&quote;>
    <div class=&quote;step&quote;>Hello, welcome...</div>
    <div class=&quote;step&quote;>For more info, go to...</div>
    <div class=&quote;step&quote;>This site inspired by...</div>
  </div>
</div>
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!

Posted: Sun Jun 19, 2005 7:42 pm
by nigma
Check out http://www.jakpsatweb.cz/css/css-vertic ... ution.html. Don't know if you'd consider CSS2's display values 'table' and 'table-cell' common though?

Let me know if this helps, or if I'm just regurgitating what you've already read:)

Posted: Sun Jun 19, 2005 9:08 pm
by nielsene
Thanks, that seemed to get me on the right track. Haven't tested it in MSIE yet, (ick) but got it working in Safari & Firefox, without using display: table. So I'm happy. Looks like I had been flipping my positioning. I had the container class (steps) being absolute, while the containees were relative to that. Flipping the two and its working.

I'll be doing all my MSIE hacks later... At least now I continue testing/developing with the site looking right.

Posted: Sun Jun 19, 2005 9:43 pm
by nigma
lol, good luck :)

Posted: Mon Jun 20, 2005 7:25 am
by Chris Corbyn
Thanks for referring to that brilliant article by the way.... changes the way I code my CSS layouts from this point on ;)

Posted: Wed Jun 22, 2005 11:40 am
by nielsene
Just to share, here a link to a two static versions of the website. I'm still fixing a few MSIE bugs, but Firefox and Safari are behaving nicely. (look at the "steps" in the footer to see what this thread was about.)

Three Column/Home Page
Regular page with tabs

I need to play with he graphics more, want to add some texture, maybe some color (ivy growing on the pedestals, etc) as well as some of the more span style stylies, etc, but I think you can easily see the idea of the design and its level of fluidity on browser/font resize.