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....
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.
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.
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.
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.
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?
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.
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.
Would this work?:
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.
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:
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…)
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.
Scott,
3-column layout with footer collapses in ie6pc, but looks good in ns7pc.
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.
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?
how about this??? http://www.donkeyontheedge.com/ala.html
3-column layout with footer now works fine in Chimera, IE6/PC and IE5/Mac.
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?
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.
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.
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 ;)
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
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.
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.
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.
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...
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.
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...
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.
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.
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.
Todd, you find a solution? Does the Donkey on the edge variant work for you?
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:-)
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.
I thinking,looking and seeing 34 comments...
please stop, look around.
http://www.cinnamon.dl
comments anyone?
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!!
Keith, I get nothing but a "server not found" error.
my apologies gentlemen
to many hours at work
the correct address
http://www.cinnamon.nl
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.
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
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.
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.
"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?
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. :)
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.
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).
"Ladies & Gentlemen" ~ Suzanne
Like I had said earlier, to many hours and not enough sleep, my apologies...
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.
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
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...
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.
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.
Forgot to post the site in queston...
http://www.muonwave.com/jon/resources.html
thanks
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.
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. :)
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...
<div id="Footer"> <img src="images/footer.gif" border="0" alt="" align="right"></div>
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
"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.
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
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.
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
Just browsing this discussion and I found this site: