Discuss: Faux Columns

by Dan Cederholm

11 pseudo-tables

Yet another approach, which I take a perverse glee in suggesting, is to emulate table behavior through your CSS.

What I mean is this: put nice, structural markup in your HTML the way Zeldman intended. In your CSS, style gross page elements to behave as table cells and the like.

Here’s a straw-man example. It requires a little markup that I would say is truly extraneous, but not much.

http://www.crossroads.net/misc/tabletest.html

posted at 01:56 pm on January 9, 2004 by Adam Rice

I don’t understand how anyone can be so determined to use CSS positioning when it requires tricks or messy hacks just to accomplish something that can be done trivially with a table. Sure tables have their share of hacks and accessibility issues, but at least I don’t need bleepin’ javascript just to place a footer.

Didn’t anyone involved with the CSS2 spec think about these kind of design issues before they began pushing it out the door and telling everyone table layouts are now officially evil? W3C’s own site can’t even make their columns equal in length for crying out loud, they should’ve been the first to know something was wrong.

posted at 02:13 pm on January 9, 2004 by Steve

13 Rendering speed

Don’t forget to consider rendering speed when using backgroud images.

If you tile a 1×1 image then the user’s CPU has to do a fair bit of work to draw the screen and can slow things down considerably.

Find a good trade off between download size and rendering speed.

posted at 03:15 pm on January 9, 2004 by guy

14 A CSS hack to emulate tables!

Isn’t it funny that people will go through these hoops for no other reason than to avoid using tables?

This a really bad trend: ALA has become the “HACK PALACE”. every article is about mastering some “hack”!

Don’t get me wrong: I love the place and faithfully read every “hack tutorial”; I value the fact that I’m given free access to the information (many times great information/great articles). I’m not indicting ALA. I’m just pointing to the sad state of affairs when so many brilliant minds are wasted on coming up with…hacks!

Long live CSS-H!

posted at 04:24 pm on January 9, 2004 by irvin

15 What about Mozilla?

Finally something that kills that awful Mozilla bug. Look at http://jstimes.vze.com in Firebird.

posted at 06:22 pm on January 9, 2004 by Sean M. Hall

16 Hacks?

People who think using this kind of techniques are hacks should take a look at the code they produced three years ago…

I really like the example of Adam Rice, which seems to degrade quite well in Internet Explorer. We can’t use it, but maybe someone comes up with a clever HTC :-)

posted at 02:30 am on January 10, 2004 by Anne

17 SCAP!

Steve wrote:
>>>I don’t understand how anyone can be so determined to use CSS positioning when it requires tricks or messy hacks just to accomplish something that can be done trivially with a table.<<<

Because of the separation of content and presentation (SCAP), with all its benefits. Using “tricks or messy hacks” today, using perfectly sane CSS 3 tomorrow – the markup can stay the same. (Not that it always does, but that’s a different story.)

And – of course – for LEARNING. If CSS isn’t pushed to its limits, how are we supposed to see what needs improving?

Steve wrote:
>>>Didn’t anyone involved with the CSS2 spec think about these kind of design issues before they began pushing it out the door and telling everyone table layouts are now officially evil?<<<

What makes you think that the people who created CSS 2 are the same people who said table layouts are evil?

If the web design community had been as involved with CSS around 1996-98 as it is today, maybe these issues WOULD have been thought about and fixed. (Of course, that would have required the browsers of the time to actually implement CSS properly.)

irvin wrote:
>>>Isn’t it funny that people will go through these hoops for no other reason than to avoid using tables?<<<

If that was true, yes. But avoiding tables (for layout!) isn’t the purpose in itself. Avoiding table layouts is just a necessary step if you want to SCAP.

posted at 05:07 am on January 10, 2004 by Peterman

18 CSS layouts

Anne:
>People who think using this kind of
>techniques are hacks should take a look at
>the code they produced three years ago…

You mean like this?

Oh the humanity!

I’m not suggesting CSS for layouts is a bad idea, I’m saying the W3C has failed to come up with a way to layout designs in CSS that is better than using tables. Maybe if these CSS cheerleaders out there weren’t so busy promoting their own CSS books or splashing XHTML and CSS W3C validator referrers across their webpage like a hip corporate logo they could be asking the tough questions like “Why can’t CSS do everything tables can?”

posted at 08:40 am on January 10, 2004 by steve

19 CSS vs. Tables

Perhaps this isn’t really the place to debate this, but I think it’s a known fact that people who have used table-based designs on their websites have made a mess out of their markup. Table-based designs can’t possibly use semantic, flowing markup in a way that can be easily understood in non-visual ways.

Of course there’s the Zeldman method of using part tables, part CSS, which is a great transitional way to design. But we’re moving forward. We have the techniques and technology available for CSS-based layouts to work now, why not use them? Tables are made for tabular data. It’s probably time for us all to realize that and stick to it.

Back to the article, it’s a great one and one of the basics that belongs here at ALA. Used the technique myself before and it works great:

http://www.breathingfire.com/farwelllake

(Had to stick a couple of header and footer images in to cap of the top and bottom of the page, though)

posted at 11:46 am on January 10, 2004 by Brad Bice

20 re: Rendering speed by guy

>If you tile a 1×1 image then the user’s CPU…
Taking 1×1000 should make things easier for the CPU, as in most cases only horizontal tiling would be needed.

My imaging software gives me 43 bytes for a 1×1 gif, 71 for a 1×1000, so both download time and rendering speed should be acceptable.

With polychrome bgs it’s different, of course.

BTW:
applying the tiled bg img to the body seems quite inflexible, it should be applied to a div without fixed height, containing the columns.

Thus, the longest column’s height determines the bg’s height, like a table’s column would.
…as can be seen at http://www.bauwohnberatung.de/, using it’s font menu. (bugs with mozilla/khtml text zoom are due to some other elements)

posted at 12:02 pm on January 10, 2004 by Marek Moehling