Bottom-up build in CSS...

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
nielsene
DevNet Resident
Posts: 1834
Joined: Fri Aug 16, 2002 8:57 am
Location: Watertown, MA

Bottom-up build in CSS...

Post 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!
User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

Post 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:)
User avatar
nielsene
DevNet Resident
Posts: 1834
Joined: Fri Aug 16, 2002 8:57 am
Location: Watertown, MA

Post 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.
User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

Post by nigma »

lol, good luck :)
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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 ;)
User avatar
nielsene
DevNet Resident
Posts: 1834
Joined: Fri Aug 16, 2002 8:57 am
Location: Watertown, MA

Post 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.
Post Reply