h2g2 The Hitchhiker's Guide to the Galaxy: Earth Edition

A999598

http://www.csszengarden.com - some amazing designs...

The main problem with CSS still (and I'm a big fan of it and agree with all the principles behind it), is that it's quite difficult to get column-based designs to work correctly.

It's easy to knock something up quickly using absolute positioning and have it look great on your screen, but making it more flexible requires some skill and can still be impossible. A good test is to resize your browser window, dragging the sides in to make it narrower, and then see what happens to your design. It should squash down to a degree, but then horizontal scrollbars should appear when you push it too far. However, more often you get text overlapping and it all looking scrappy.

Another test is what happens when you break the design using overlarge images or long strings of unbroken text - does the column expand or does the text overlap.

Because tables can react to the size of their contents, they can still sometimes be the only solution to getting the right design (or that's what I've found).

Table-based columns also degrade better on browsers which don't support css - they retain a column design rather than going linear.

Frankie

Examples:

http://www.csszengarden.com/?cssfile=/031/031.css&page=1 - works really badly - text overlaps and looks scrappy.

http://www.csszengarden.com/?cssfile=/025/025.css&page=1 - all kinds of weird things happen with this one, with different elements passing over one another.

http://www.csszengarden.com/?cssfile=/034/034.css&page=0 - works until you go below 800 width, after which content disappears.

http://www.csszengarden.com/?cssfile=/039/039.css&page=0 - works correctly.

Interesting...

Must say there's enough of a graphic artist ( - call that "artist") in me to like the way the page completely changes character by simply changing a separate layout file

BTW, the 034 one works like a charm here - both in IE6 and Mozilla...

Frankie,

Depends what browser you are using. Some stylesheet commands aren't fully supported in IE... for example float: and clear:

B.

Forgot to mention... there is a CSS competition going on over at:

http://www.builtforthefuture.com/reuseit/

All you have to do is re-design Jakob Nielsen's UseIt.com web-site. Looks like fun!

B.

Yeah, but the links above show that column designs in css can behave differently even within the same browser.

I'm using IE6 too, and http://www.csszengarden.com/?cssfile=/034/034.css&page=0 loses content off the off the left when I resize down for me... odd.

There's also the issue that if you use css to reposition into columns, which order do you put them in on your page? It might not make a difference to the design, but will appear in older browsers/mobile devices/aural browsers...

But those differences between browsers are a nightmare. CSS is wonderful, but it's too new to be used for complex layouts by itself. As version 4 browsers disappear and version 5 browsers begin to fade, it will be much more useful (assuming Microsoft gets it right with their replacement to IE 6).

The one problem with columns in CSS that I have never seen a solution to is how to deal with variable amounts of text. If you never know which column will be the longest, it is very difficult (if not impossible) to create a stylesheet that will work acceptably in all browsers.

In Apple Safari (Konqueror) there are problems with the 3rd example above, but the others work great.

Internet Explorer is being frozen at version 6 until the release of Windows Longhorn. There also won't be any stand alone versions after 6 so if you want IE 7 you'll have to upgrade to Longhorn.

So basically if you use Internet Explorer, prepare to do without proper CSS support for some years.

*coughs*
on that subject ...
F19585?thread=202588&skip=300&show=20#p3918134