tanfa - archived muse
:: View Archives List :: Home :: Skip to Have a Muse
Archive dated January 26, 2004
Multi Column CSS Layout
During the Christmas Holidays, and just for fun I had my head stuck in part of the CSS2.1 recommendations. That was just for fun 
.
One of the results was this new Multi Column Layout. It uses Absolute Positioning and uses the recommendation that an Absolutely Positioned (AP) element will "calculate" its height from its containing block providing the containing block is not position: static; (default).
Of course IE doesn't play ball with this recommendation but we can use some of its little quirks to encourage the same effect.
there is a "floaty" one coming soon too..
Update: Flexi-Float CSS Layout article leading to demo now added.
Hi Sean,
I understand the frustration.. I do, but these layouts are purely experimental, there is no "holy grail" yet, just a set of choices.
CSS is only a big disappointment if you expect to recreate exactly what *you* already know (e.g. table layouts) there is so much more to CSS than just copying a table layout.
Why not still use your layout tables (you can still CSS them) until you find your happy medium, the transition is only just beginning
These hacks are no longer hacks, they are now what we have to live with. The "hacks" involved here were for IE only, becuase it has the majority of users we have to do something for it, therefore it's own proprietary code seems to be a choice rather than a hack.. as I see it anyway
Good Luck
Claire
Dear Claire,
The Column CSS Stretch is a wonderful CSS hack. I have been looking for a while for a template that would allow for a resizable center column. The site I scripted ended up using fixed positioning.
I did notice one tiny flaw in the CSS Stretch, resulting from the pecularities of IE. If the window is minimized horizontally so that a#toplink is missing, the horizonal scrollbar is dragged to the right, and then the window is then maximized horizontally, a#toplink dissociates from the rest of the page proportionally.
In practical terms, this sort of page break is unlikely be of much importance, but I'd love to know if you have any suggestions for a workaround.
Cheers!
Slick
Posted By SlickWillie on 27/09/2004 at 16:05pm «þ»
Hi Slick, thanks for pointing that out I'd not noticed.. grr to IE and it's foibles..
I isolated the bug which became even more apparent in the new design.. and I think I've sorted it.
IE Absolute Positioning Jumping Bug
I hope the page it was on is now corrected, although it's not relevant to the actual demo, it was an aesthetic thing I appreciate the heads up 
Thanks for sharing your layouts. Read a report that you can have problems with Win XP SP2 using IE expressions because the OS reacts to them as Active X and gives a warning. Have you heard anything about this and could it be a reason against using IE expressions?
Hi
Thank you for the layout! I'm trying to rewrite my table design to a css compliant. And your design is almost perfect as a main template. I have just one problem - when I horizontally resize the browser (both IE 6.0 and FF 1.0 PR) the right column is sometimes put a pixel off to the left (IE) or to the right (FF). It seems like a round function "error" when converting from %value of the content width to match the full width (left + content + right).
Is there any solution to this problem except for converting the design to absolute widths?
Posted By JanSlusarczyk on 02/10/2004 at 10:04am «þ»
@Ben
No I haven't heard anythign like that, but I'll try to find out..
@JanSlusarczyk
there will always be a rounding problem when using percentage widths, but I only used borders to demonstrate the full length capability, you could use a background image which should mean the pixel difference is not noticeable, or yes fixed widths would do it too..
Claire
Sorry but muses are now closed on this article
previous :: top of page :: next
I love CSS but...I just don't see how I can work with it and not use tables. These hacks are totally insane! How can you possible keep up with all the guessing what to do and still make money?
What happens if you have 100 websites and the latest browsers decide not to work with all those custom websites?
Every time I find a 3 column layout I try to use it I find myself in a nightmare.
I almost had one that worked but the center content had to be long enough to surpass my left column navigation (19 links) or the navigation would extend beyond the background of the site and the footer would be up top blah blah blah...
CSS is a Big Big disapointment when I also am struggling with PHP and Graphics creation and on and on.
Sorry for the rant but I just don't know what to do as I would like my sites to be up to W3C Standards for all the benifits but God how does one accomplish it and stay on top of it all?
Posted By SeanKarns on 20/07/2004 at 15:06pm «þ»