Yesterday while crunching, munching, belching, and...well, typing a bunch of CSS code and template markup for a project I'm working on, I was smacked upside the head with one of the greatest weakness of using CSS (and not tables) for element positioning - those blasted footers.
Don't know what I'm talking about? Take a look at this collection of CSS layout templates provided by The Noodle Incident. Notice anything missing? None have a horizontal DIV below a set of columns. The three column + top box template comes close - very close - but fails to provide space for content that needs to appear after the columns.
On this site, which is completely controlled by CSS (typography, positioning and all), I have to cheat. Instead of placing my "So now you know" footer inside the global parent DIV, I have to break it out of the whole structure, center it, and fake the look of it actually appearing after the two long columns.
Wired.com ran into the same problem with their totally-CSS driven web site. The footer wouldn't work in any way, shape, or form, without being placed at the bottom of the middle DIV - a solution nowhere near as elegant as it could be if set flush left and separate from the columnar content.
So in my own aforementioned project, I am being forced into dropping pure CSS for the layout, and will have to use tables in order to accomplish the conceptual intent. Which, for those of us who preach the merits of CSS / XHTML, is an acrid pill to swallow.
Unless additional properties are added to CSS, including the ability to overflow textual content and have it resize sibling DIVs in the same parent (just like a table does when you put more stuff into one cell than another), using CSS as a complete replacement for tables will never take off in the mainstream -- unless of course said business is comfortable with their web site looking like every other columnar CSS/XHTML 1.0 strict weblog on the planet.
This isn't rant per se against using CSS for positioning - which I am a hard core advocate of over the bloated, messy, slow, structurally ridiculous method of nested tables. But something clearly needs to change in order to move forward. And at the pace we're moving, with the lag time between browser revisions as an additional factor, it could be years before we have a proper solution. Sob.
Comments
why not just use one table for a "shell" (three column, fluid two columns, etc) per say, and use CSS for the rest? I have used this technique in a couple of sites and no one noticed a performance difference and the code is super clean....
Posted by: barry at February 21, 2003 10:16 AM
Mark Newhouse has a 3-column layout with header and footer that even works in Netscape 4. It is pure CSS.
Are there some ways of breaking this layout that you already know about? If so I would be keen to know them too, because I use it on some of my pages.
Posted by: Guy McCusker at February 21, 2003 10:43 AM
RE: Why not a "shell" table?
Yes, that's exactly the route I'm taking. I guess I'm splitting hairs here, and what I'm visualizing doesn't even exist (yet), but my inner CSS purist would like to see NO tables used at all for layout markup. If DIVs can be absolutely positioned, and do things tables cannot do, you'd hope they would eventually grow "smarter" with time to surpass tables once and for all.
Posted by: Todd Dominey at February 21, 2003 10:43 AM
Thanks Guy for the link. The problem with that layout, while a fantastic solution for some people, is that the footer is positioned relative to the middle, main content column. If either the left or right column were to surpass the length of the middle column, the DIV would overflow over or under (depending on the z-index) the footer DIV instead of "pushing" it lower on the page like the middle column does.
Posted by: Todd Dominey at February 21, 2003 10:56 AM
i've had the same frickin problem...CSS is good and i use it for almost every site now, but it still can't do *everything* tables can.
Posted by: paul at February 21, 2003 11:07 AM
This has always been my biggest problem with going completely CSS. When you deal with sites with dynamic content, or content producers with no CSS experience, you can't be sure the footer will work. It's unfortunate. You no anyone working on the CSS group with the W3?
Posted by: Clint at February 21, 2003 11:08 AM
You can check my personal website http://www.minid.net I've coded a good css layout wich works well for standard browsers.
IE Mac bad results, but i don't care anymore for crossbrowsings... ;D
ANyways my layout is well sight in IE's win, Moz, Ns 6, and Opera some gaps but not that much..
Safari i've got nice results, some little gaps.
It does looks good in Konqueror linux too, maybe i need to polish some stuff but it's a decent layout for supporting standards and really nice for develop new shapes and positions.
Posted by: mini-d at February 21, 2003 11:10 AM
We can make "invisible" airplanes.
We can make computers more powerful and smaller than those released last month.
We've made huge advances with the human genome.
You wouldn't think we'd still have these !#$% problems with CSS.
Posted by: Ian Evans at February 21, 2003 11:15 AM
Would this work?:
3-column layout with footer.
It's somewhat in progress, but it does seem to work on Mac IE5+ and Mozilla/Chimera. I haven't yet tested it on the PC.
Posted by: SU at February 21, 2003 11:20 AM
I’m working on a client project right now and facing some of the same issues. The compromise we made on Wired News for the footer was a big visual bummer IMO.
Big John’s recent explorations with floats (instead of the absolute positioning we used for Wired) have provided considerable inspiration to push further on the matter:
Source Ordered Columns
Posted by: doug bowman at February 21, 2003 11:53 AM
CSS totally changed my professional life for the better, but like they say, “What have you done for me lately?”
The footer bug stinks, but really, I’ve had to put footer notices and links in a solid dark bar at the bottom of our corp. pages for so long, that the Wired.com footer seems like a breath of fresh air.
The “must have an obvious footer” layout seems outdated and lazy, and it’s almost as annoying as the “check out our network of sites” banners found on the Lycos network (webmonkey.com, wired.com) and the Netscape Network (cnn.com, fortune.com, any AOL property…)
Posted by: nathan at February 21, 2003 1:42 PM
I use a div with "clear: both" for the footer on my site.
Admittedly, most of my layouts (there are 6 to choose from) involve just two columns so I'm not sure how a third would affect this.
Also "clear:both" causes some problems in Safari. A bug report is winging its way to Apple as we speak.
Posted by: Jeremy Keith at February 21, 2003 2:01 PM
Scott,
3-column layout with footer collapses in ie6pc, but looks good in ns7pc.
Posted by: jon at February 21, 2003 2:24 PM
Ah ha! Jeremy, that's the same problem I have on my blog (linked) -- the footer gets all mashed up and for the life of me I couldn't see why it was getting that way in only Safari.
I've also reported it as a bug, but I thought it may have been related to the content being aligned-right (other issues in Safari with right alignment). Interesting to hear it's the clear: both; that's the problem.
Posted by: Suzanne at February 21, 2003 2:29 PM
I used a clear:both -but only a two column lay out.... What about wrapping the three divs inside an outer div (instead of a table) which would contain them and then placing the footer after that? I saw that somewhere once... If I can find the link I'll post it.
What browsers are you coding for?
Posted by: Marty at February 21, 2003 2:40 PM
how about this??? http://www.donkeyontheedge.com/ala.html
Posted by: Marty at February 21, 2003 2:43 PM
3-column layout with footer now works fine in Chimera, IE6/PC and IE5/Mac.
Posted by: SU at February 21, 2003 2:57 PM
Getting off topic I know, but I'm puzzled:
Check out the css for the main layout at 37 signals:
http://www.37signals.com/sophisto.css
I was comparing the css for the main 37 signals site with the other link in # 13 above.
Why is the ie box model hack around the other way on the main site?
That is,
.ThreeColTextFixed {
float: none;
margin: 0px 0px 0px 0px;
padding: 0px 20px 0px 20px;
width:240px;
voice-family: "\"}\"";
voice-family: inherit;
width: 240px; }
html>body .ThreeColTextFixed { width:200px; }
Shouldn't the width after voice-family: inherit; be set to 200px?
Posted by: BongoMan at February 21, 2003 4:09 PM
37 Signals has the same problem with the footer -- all squashed to one side -- in Safari. Interesting! It also has the oodles of scroll problem I'm having.
Posted by: Suzanne at February 21, 2003 4:29 PM
BongoMan... The difference is because we included the XML information in the header of the 37signals site:
xml version="1.0" encoding="iso-8859-1"
I'll eventually remove it and change the code, but as a result of that bit above, it makes IE6/PC behave differently. The CSS compensates for that.
Posted by: SU at February 21, 2003 4:51 PM
As for Safari... You've got to draw the line somewhere and a beta browser that 0.01% of the population uses is a pretty good line right now ;)
Posted by: SU at February 21, 2003 4:53 PM
Thanks Scott - just when i thought I was understanding css layout!
I now remember reading about this at tantek.com - that the xml prolog forces IE6/win to use quirky model and that the prolog can simply be omitted?
Cheers
BongoMan
Posted by: BongoMan at February 21, 2003 5:12 PM
since little boxes was my fault, and since i wasn't expecting to hit this during my morning reading, let me ad lib a quick disclaimer that i think the upper end css crowd here can grok: little boxes is *old*. the thing came out right on the heels of the import trick to block nn4, just when we were figuring out how to get colums to work at all. i need to rewrite it. meanwhile it stays up as robust beginner templates.
but yeah, proper footers is a problem. i think it may have been properly solved by now and want to review and add it, and add a proper discussion of how flow works. since everybody links to little boxes (this was never expected) i need to make it a much better beginner's foundation, rather than the hurried "illustrated problems" it was at the time.
thanks for the nudge, todd.
Posted by: owen at February 21, 2003 5:53 PM
Oh, Scott, I don't mean that 37 Signals is wrong for it, or should even adjust to compensate, just that the more pages we find with the same issue, the better a bug report can be placed and hopefully they will be able to fix it. Since it uses the same engine as Konqueror, and arguably has a specific audience that would be affected by this error in display, I think it's a nice idea to figure out what's causing it.
I'm not going to code around it, but I'd like to know why it's happening so the Safari developers can fix it.
Posted by: Suzanne at February 21, 2003 6:44 PM
Hey Owen - just to clarify, I wasn't necessarily saying that your page needed to be updated. I pointed to it b/c it was the clearest illustration of the variety of layouts possible with CSS - with, of course, the one footerless omission. Your page is a big help, I'm sure, for those getting used to CSS for the first time.
Posted by: Todd Dominey at February 21, 2003 7:27 PM
I think Wired's solution is the best one available at this point, and personally I don't think it looks bad. The only time it doesn't really work is when the middle column is shorter than the flanking two. That's an issue I'm trying to deal with as well. Like the saying goes though, a 90% solution now...
Posted by: Dan at February 21, 2003 7:34 PM
this is interesting - just this week, I gave up on adding an auto-footer to a client site. I’ll go through the samples and see how they work. And put the, “damn footer,” chapter of my, “confessions of a table user,” book on hold.
Posted by: -b- at February 21, 2003 8:25 PM
Wouldn't ( br clear="all" ) work for this after the three columns of code? Thats how I achieved something very similar to what this sounds like. Although I'm not sure how browser friendly it is...
Posted by: Jake at February 21, 2003 11:08 PM
Could someone please tell me what is the visable benefit to the user of a full CSS layout vs. a three column table with two fluid columns?
I personally could give a flying F* if i have to use a table and even one or two nested tables in my sites.
Maybe its just that i am so busy chasing down leads, creating proposals, selling clients, designing, coding, and maintaining sites, that i have no time for the finer fine points of the fine points of css.
But then again, my code is pretty sloppy, i have yet to create a full site to XHTML 1.0 complience , and i currently need to mop my floor.
Posted by: rob rhyne at February 22, 2003 2:30 AM
Rob: The benefits may be subtle, but they are there -and some of the benefits may be more for you.
1) It's easier to maintain a tableless site -especially the content areas. Once you drop tables you never want to go back (however for forms they are little more than necessary.)
2)You can arrange the content in any order you want in the code, but then position it alternatively. ie...in the code you could have 3 divs: Maincontent, left nav, right nav - but when you present it to your browser then it shows left nav, Maincontent, right nav. What the lay out in the code does is allow search engines to find the most relevant information first - and it will render in the browser the most relevant information first - but ultimately will render as you've laid it out.
3) Your code is cleaner and easier to access (potentially) by multiple other devices.
Hope this helps.
Posted by: Marty at February 22, 2003 11:10 AM
Rob,
Using CSS and XHTML (and, prefrebly; semantic markup) is to ensure the future of the web. Also, it makes your job easier, and the vistors stay a better one. Even if their browser doesn't support the latest and greatest CSS-technique, a good CSS-based layout can degrade so they can at least use the site.
A table-based layout cannot do that. A table-based layout is also a hell to code, and maintain. Try returning to anything you've coded in the last two years and you'll see what I mean.
CSS and XHTML fixes those issues and more. The only problem now, is that we aren't always seeing the results we want. The footer-example being one of the main gripes at the moment.
Posted by: Andreas at February 22, 2003 11:30 AM
Todd, you find a solution? Does the Donkey on the edge variant work for you?
Posted by: Marty at February 23, 2003 12:20 AM
Rob: We've been working with CSS only layouts for a while now, and for me, the main reason is futureproofing.
In Europe, we're about to have a flood of devices reading traditional http served stuff onto tiny screens (sub 640x480). CSS lets you compromise intelligently with these devices. You can have graphics neatly partially disappear, columns reposition themselves without breaking their neighbours and so on. My personal experiments at http://donkeyontheedge.com have come out of this.
Right now we're looking at two or three acceptable compromises (the shell table with CSS and XHTML is a reasonably sensible one) but for me, I want total control over handheld stuff without having to filter or rewrite everything:-)
Posted by: Dug Falby at February 23, 2003 8:20 AM
Just wanted to say thanks to those who suggested clear:both as a way to fix my formerly kludgy footer. The footer is now within the parent instead of the centered-cheat deal I wrote about in the post. That said, it is appearing after the two columns, with the main right one pushing the footer down to where it should be. If the smaller left column (or right on my "About" page) were to ever grow larger than the main column, I'd be in trouble. But it works fine with the current design.
Posted by: Todd Dominey at February 23, 2003 12:15 PM
I thinking,looking and seeing 34 comments...
please stop, look around.
http://www.cinnamon.dl
comments anyone?
Posted by: keith at February 23, 2003 5:01 PM
I am seeing 34 comments, please look around and perhaps once your heads pop out of that cloud, sell, sell and sell, perhaps than we can see it as it really is...
A gain http://www.cinnamon.dl
For your benefit!!
Posted by: keith at February 23, 2003 5:04 PM
Keith, I get nothing but a "server not found" error.
Posted by: Jay at February 24, 2003 5:56 AM
my apologies gentlemen
to many hours at work
the correct address
http://www.cinnamon.nl
Posted by: keith at February 24, 2003 9:46 AM
My site (www.guyweb.co.uk) uses the 'float' to do footers. I have a wrapper containing everything followed by a header, 2 cols and a footer. Everything floats left of everything else. Seems to work OK.
Header and footer are both set to 100% of the wrapper. This seems to keep everything in order.
Posted by: Guy at February 24, 2003 11:22 AM
Just thought that I should add that I found a site which demonstrates how to use footers in CSS2:
http://scott.sauyet.name/CSS/Demo/FooterDemo1.html
It doesn't work in Opera.
I am currently working to adapt the footer to a three-column site:
http://www.kayodeok.btinternet.co.uk/test/CSS-Template.htm
Posted by: Kayode at February 24, 2003 1:58 PM
Kayode, the example on the first link doesn't work in Safari either. The footer rides up above the window bottom to the bottom of the text.
Posted by: Jay at February 24, 2003 2:25 PM
Thanks Jay,
Not sure if a three-column design can be floated but clear:both seems to work on a two-column design so I will look into this.
Posted by: Kayode at February 24, 2003 4:24 PM
"my apologies gentlemen" ~ Keith
*ahem*
Regardless of the slight, Cinnamon is a lovely site, and works great in Safari, Mozilla, and others tested, consistently as far as I can tell? The id="feet" I find very charming for some reason.
It's not quite a true footer, as it resides within a larger DIV element, though?
Posted by: Suzanne at February 24, 2003 8:53 PM
gotya people, and i like your answers to my miller highlife induced question.
i will humbly step aside and let you work it out, while i fumble around with as few tables as i can get away with and still sleep on a regular basis. :)
Posted by: rob rhyne at February 24, 2003 9:27 PM
Best I've managed is this, which works okay but also sucks a lot because unless the center column is long enough to push the footer below the left and right (fixed-height) columns, it will fall underneath them, as they use absolute positioning.
Frankly, I'm still convinced that absolute positioning is the way to go (rather than floats), but a truly elegant solution for fluid sites remains elusive.
Posted by: Brandon at February 26, 2003 1:30 AM
Of course the holy grail of footers is one which sits at the bottom of the viewport (browser window) or, if the content is longer than the viewport, it simply comes after the content.
The other kind of footer to strive for is the kind we get with 'paged' media'. The kind of footer we're all used to seeing when we print out a Word document; one which sits at the bottom of the page with a page number, a logo, maybe a chapter name, etc. And what about footnotes? They will need to sit at the bottom of a printed page too. Well these are being addressed by CSS3 as we speak (although they haven't got much past the conceptual stage with printed media).
Posted by: RIch at February 26, 2003 5:36 AM
"Ladies & Gentlemen" ~ Suzanne
Like I had said earlier, to many hours and not enough sleep, my apologies...
Posted by: keith at February 26, 2003 9:04 PM
i've found another example of the header/multi-column/footer design for you to critique:
Position Is Everything
http://users.rraz.net/mc_on_the_rocks/testpage/thr.col.stretch.html
Gerhard Schoening has a template, but I only have a localized version. i'll ask him to post it on his site for everyone.
Posted by: Jason at March 1, 2003 12:35 PM
now on Gerhard's site:
http://www.gerhard-schoening.de/test/CPW/cp3col01.html
and
http://www.gerhard-schoening.de/test/CPW/cp2col01.html
which use a common (@import!) CSS
http://www.gerhard-schoening.de/test/CPW/cp23col01.css
Posted by: Jason at March 1, 2003 2:23 PM
http://webctr.com/css-footer.html
It may be similar to what others have posted here; I haven't looked at them all yet.
It would seem a simple matter to make the central block - id 'content' - relative so positioning could be used within t, if required...
Posted by: Darrell King at May 1, 2003 7:22 PM
I agree this is a huge problem. Out of one side of its mouth, the W3C committee is marketing the power of CSS absolute positioning...but then in order to make CSS work with footers, you're pretty much forced to use relative positioning and a series of floats to attempt the look you want, like the example the person above provided. So much for total control of your look and feel.
When you have a site that involves more than just a header line, main content line and footer line, then you'll begin to see that this trick doesn't work well and it's a true nightmare to try to get it to look right in both IE 6.x and Netscape 7x.
Posted by: Jordan at May 12, 2003 10:43 AM
I'm trying to do a footer, for site copyright and static one-liner nfo on a particular site. Seems that so far, I'm having problems with IE 5.01. My intention is to make it floating and fixed to the bottom of the page, but without using iframe. Seems to work in ALMOST every browser I've tried - with the exception of IE 5.01 under Windows (and me with no Windows systems available...).
Help.
Posted by: John Morrison at June 11, 2003 2:49 PM
Forgot to post the site in queston...
http://www.muonwave.com/jon/resources.html
thanks
Posted by: John Morrison at June 11, 2003 2:52 PM
We have the same problems with a dynamic three-column-layout with a footer, where either one of the three columns can be the longest, according to the page content. If only the middle column would always be the longest, then a additional around the tree columns would help. But that isn't the case.
I wish the W3C and the Browsers would come up a solution in the near future.
Posted by: Cordt Rott at June 26, 2003 6:41 AM
I am having this problem with a footer too. I have tried clear:both; and it is not working. *pulls hair out*
I have a header, left and right column and the footer.
If the left column though ends up longer than the right it overlaps the footer.
However if the right column is longer than the left everything is fine.
*sigh*
I can see there is no easy answer. I will just have to keep searching and toying with it. I searched CSS footer and this was the second result on the page. Glad I found it. :)
Posted by: Heidi at June 29, 2003 8:05 PM
This trick makes an image sticky at the bottom of a page using css. The image stays at the bottom of the page independent of whether the content flows past one screen's viewable area and induces vertical scrolling.
A little javascript/css trickery...something i ran across a long time ago and has solved the 'footer' issue for me.
create a class Footer in your stlye sheet...
#Footer {
margin:0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
position: absolute;
top: expression(document.documentElement.scrollTop + document.documentElement.clientHeight - offsetHeight);
}
then place a div named Footer in the html containg your image...
it stays at the bottom of screen and scrolls with the page...it naturally is on top of everything else, but you can use z-layer and pageflow tecniques to change this.
anyway, hopefully enlightening to someone. you can see an example of this on one of my sites... http://www.pangeafoundation.org/v2/mission.html
Mike Carnohan
Posted by: Cantedview at October 24, 2003 9:35 PM
"Ooooh, you must use CSS, it's so much better and it's compliant. No Java or other nasty stuff our users can't see".
Well I was going great guns until I got to the bottom bit. I've spent all week trying to get a footer to work, then I find you guys and you can't do it either. Cripes! What idiot at W3C managed to ignore footers! Just about every site on the web has them. I give up!
I've decided to redesign the thing with no footer. If that fails I'm going back to my shared border until someone finds something better.
Posted by: Gilly at December 19, 2003 5:46 PM
Have I found the holy grail here?
Looks like you get headers and footers, all in the right place and all at the touch of a button. Well, OK, a few buttons but I've got my layout!
So, experts..... what have I missed?
Oh yeah, you'll want the link
http://www.csscreator.com/version2/pagelayout.php
Posted by: Gilly at December 20, 2003 8:31 PM
Wow. I can't believe how difficult this has been. I've been having the same problem with the footer not being pushed down by longer columns on the left and right side.
The solution I've come up with so far is to use the min-height hack in conjunction with the fluid 3 column holy grail template. It works for us because we know the left and right columns stay at a specified height. It works on IE and Mozilla browsers but not Safari, which breaks my heart since it's what i use at home.
Going to try and use a container tag to see if I can solve the safari incompatibility. Tsk.
Posted by: Kevin Hale at December 30, 2003 10:37 AM
Hi Guys;
I'm a stranger here but I had to write to give you my thanks. I've been struggling with a CSS problem for many weeks now... just couldn't fix it. I was considering changing to a table layout when I thought I'd do one more search on Google and I found this post. Well thanks to the tips here it's all sorted and I can't be thankful enough. Thanks guys.... keep on posting you never know who you are going to help. Many many many thanks.
Nicky
Posted by: Nicky at April 28, 2004 2:10 AM
Just browsing this discussion and I found this site:
http://www.pmob.co.uk/temp/3colfixedtest_pob.htm
Posted by: Dale at June 11, 2004 9:21 PM
archives
You are reading "The Elusive CSS Footer" in the individual archives.
Check out other recent posts in the Tech, Web category
Return to the front page.
Dominey Design
You can see my Online work (Graphic/Multimedia/ WebDesigner):http://lifewithoutcolour.blogspot.com/
No comments:
Post a Comment