11 Not to pile on but...

This article is pretty cool at addressing a cosmetic need on our web site. It works mostly but I had to add two extra div nestings. I’m really loosing interest in CSS. I try to keep my structural code as simple as possilbe but then I have to keep adding more layers of complexity to what should be a simple stack of blocks. Cuz you gotta wrap the blocks in containers and then the containers have to be in containers and then most likely those containers need to be in meta containers, usually with only one or two properties per a div. Seems like a waste and not much of an improvement. Maybe someone could write about the theory behind div nesting. At this point its getting silly.

posted at 11:04 am on February 6, 2004 by gc

12 Opera 7

Over here it doesn’t work properly in Opera. In the last examples I have to scroll to see the footer. Is that normal?

posted at 11:22 am on February 6, 2004 by Fabian

13 Why JavaScript?

http://steve.pugh.net/test/test57.html

posted at 11:49 am on February 6, 2004 by Anne

14 re: why javascript

that example doesn’t work in IE mac or safari. the footer stays in the middle of the screen with short content.

posted at 11:58 am on February 6, 2004 by James Atkinson

15 also re: Ummm, why

Brian said:

“You anti-table zealots crack me up… …A simple table element with a few attributes performs this task nicely.”

If you’re refering to height=“100%”, that doesn’t work in a modern browser. It maybe be dependant on doctype, but still. Even in 4.01 trans, it does not work.

Now what?

posted at 11:59 am on February 6, 2004 by 4.01

16 Re: enough with the workarounds

It does seem that many of the workarounds would be unnecessary if inline-blocks were standard (especially as they work for 95% of users – i.e. IE).

The semantics are simple – fill the box like a block box; position it like a replaced element (e.g. IMG). Ironically, using OBJECT with type text/html data works!

posted at 12:01 pm on February 6, 2004 by The Bead Man

17 Simpler approach?

I did this about a year ago and can’t remember the exact approach, but I think I just made a footer div with fixed position at 35px in height and set the margin-top to -35px. Of course you’ll need to pad the bottom of the content area so the footer doesn’t overlap, but that’s trivial.

I didn’t ever deploy it and so only tested it in a few browsers but it did appear to function just fine. Any thoughts?

posted at 12:12 pm on February 6, 2004 by David Graham

18 re: re: why javascript

Which version of Safari?

posted at 12:20 pm on February 6, 2004 by Anne

19 A bit much

I agree with some other comments that a lot of these newer techniques are going to far around the pylon. I love JavaScript, I love modern methods. But this is a lot of code to add to my already growing (and groaning) stylesheets.

And I like playing with the DOM, but I don’t want to have to mess with the JS code to set a footer, it goes against what I think JS is for. And I’m a JS nut.

I’m redoing a site right now where we could use this, but I won’t. I’ll let the footer float up when it has to, and I don’t really see any problem with that at all – it’s certainly not worth adding all the code for.

Even so, nicely written and good job figuring it out.

Tom

posted at 01:34 pm on February 6, 2004 by Tom Dell'Aringa

20 So where is the author?

Thank you all for sharing your opinions and discussing this article.

Unfortunately I’m on a short ski trip in Cervina (Italy) this weekend, right now I’m sitting behind a computer in an internet cafe to follow the discussion. So it might be I have to come back on some issues mentioned in the beginning of next week.

Fabian: I tested the examples in Opera 7.1 on WINXP and WIN2000. Could you please post in which Opera version on which OS you encountered the problem?

Anne: I quickly ran through the code of http://steve.pugh.net/test/test57.html and saw it uses the min-height attribute. In fact it resembles the CSS method described in this article, with the main difference it uses absolute positioning in an absolute box, instead of absolute positioning in a relative box.

I agree that CSS can give some headaches especially if you are a novice CSS designer. Still I don’t think the CSS method is that hard to implement if you have a little bit more experience with CSS.

I see the JavaScript/DOM method as a good temporary solution. It looks complicated, but you can just copy it over an reuse it any time you like.

posted at 02:09 pm on February 6, 2004 by Bobby van der Sluis