Don't (ab)use CSS for page layout

Before you BBQ me - note the word layout here. I'm not opposed to CSS. Instead don't get me started about crappy web sites that use "font size=+5 face=Arial" in every sentence or are even just saved from Micro$oft W*rd "as HTML". CSS is great for styling your contents. How do I want to make my H1 heading look like? How much space does a P paragraph have above and below? Which font style do I want to use? That's what CSS is good for. I like it. Keeps my (X)HTML clean and readable. And the CSS if often pretty readable, too, even if you are a web design mortal. But the worst thing that was ever attempted in CSS is (ab)using it to create page layouts. By layouts I mean multiple columns on a web site for example. There are hacks to accomplish that. But CSS was never conceived for complex page layouts. Would you use OpenOffice style sheets to position certain elements across your stationary? No, you use it for styling elements. Hacks are often cool. But they are no paradigm to improve the web world. "Just use a float or two and define widths and that's it.", right? CSS evanglists even talk about "fluid designs". IMHO it's not really fluid because you need to fix your floats. There is no way to say "this DIV should be as wide as the widest text in it". Your only ways are to specify the width as percentages or as absolute pixels. Most people seem to use absolute pixels. Now how poor is that? I'm designing a fluid web site that is supposed to work on any monitor and I'm dealing with pixels? Many web design documentations say that you should stay away from pixels. Specify your text size in "em" instead so that the user can choose the font size. And now all of a sudden I'm supposed to assume that some random navigation column is supposed to be 235 pixels wide? Everybody is complaining about crappy web sites saying: "This web site was optimized for 1024x768". Why not even say "You should have a good glass of red wine at the right temperature, a furry animal on your lap and dimmed your ceiling light when watching this web site."? (Yes, that's how I prefer to spend my time on the web.) Web designers seem to use the mathemical average resolution and use that for their design. Have they ever tried to view the web site on a monitor with a much larger resolution? Have they bothered to try it on a mobile phone? No. It just looked cool on their monitor. Browse most cool CSS-layouted pages on your BlackBerry and you will see the whole mess. Because 235 pixels on a mobile device may well cover up the whole width of the display. So what is my proposal? Use the crappy tables again? Aren't they supposed to be used for tabular data only? Yes, actually the solution is tables. Because there is still no other way to do proper layouts. And the kind of tables I'm think of is "left colum + center column + right column" with the center column occupying 99% of the width. Job done. I'm not talking about tables with invisible 1x1 pixel GIFs that serve as spacers to control the size of each column done by people who got told that web sites are done with DreamWeaver. Perhaps we need three different way to describe a web site:

  • HTML: to define the content
  • CSS: to style the content
  • whatever: to define the page layout

So long tables do have their right to exist because:

  • You don't have to specify widths in pixels thus rendering the columns to the exact width that is necessary.
  • You don't need hacky CSS that will likely not work in 5 years.
  • Your web pages will look good on any browser.

It's really interesting to search the web for other people who feel that using CSS for page layouts is plain wrong. But they are often toasted by CSS nerds who haven't understood that CSS is the wrong tool for this job and who claim that it's the way to go and the CSS haters just haven't learned how to use it properly. Just because it's possible it doesn't mean it's the "proper" way. Just look at how GUI libraries work. They specify their elements in a grid. For a reason. CSS page layouts are a nice proof-of-concept. Okay - you can abuse CSS for layouts. Well done. Now let's get back to work. Floating DIVs serve different purposes. And unless the W3C comes up with a decent way to handle page layouts let's just not try to be cool but get our work done. With tables. Or next time a Javascript guru will come along telling you that Javascript is the way to layout your pages and that both CSS and HTML tables suck. (Yes, it can be done with 90% Javascript... just look at ExtJS.) I rest my case and will now fix the Drupal Zen theme to work in a good old-school working table manner. No, seriously, I probably won't use tables everywhere. But I felt like saying that CSS layouts are not the obvious solution. Just because the majority of people on the web seem to think that tables are evil doesn't make it right. And that the W3C claims that tables shouldn't be used for layouts is nice and all - then why don't they offer something to do layouts? (Similar rants from Ron Garret and parhelion. Amusing to see how many flame wars the topic brought up. :) Especially the kiddy comments from CSS evangelists who seem to ignore reality completely. Perhaps they even use CSS to make coffee or something.)

Comments

@foo: I don't know, but I

@foo: I don't know, but I have the following link, where you surely can find something that fits your needs:

http://www.yaml.de/en/community/cms-templates.html

Using a CSS framework like YAML is a good thing to do, as using a web programming framework like Pylons, Django or Ruby on Rails for that purpose. Additional a good JS library like jQuery - and you have a perfect setup :)

For grid-only-based layouts - YAML can do both - also the 960 framework is a good choice: http://www.960.gs

---

@Christoph: Hope you put in a good CSS for the printer-friendly version of the new ISPmail tutorial, because I think its the version the most people will use :) Even with black and white and some greys it will look good :)

Just a link for you

Just a link for you :)

http://www.yaml-fuer-drupal.de/

Don't use tables for layout, please :)

It's simply not true that

It's simply not true that "CSS was never conceived for complex page layouts". It'd been conceived for exactly this purpose too -- the box model, block level properties, floats and clears etc. Your complaint about styles that look crappy on a BlackBerry is a bit misguided: the big advantage of CSS is that you can have _another stylesheet_ for BlackBerries and let users switch them, without touching the page code. Heck, you can force your own stylesheet in the browser if the authors don't provide one. As far as 'pixelitis' is concerned, there's simply now way to make _everybody_ use best practices, there's always been and always will be sloppy CSS, sloppy HTML, sloppy PHP, sloppy whatever you want. And you're grossly exaggerating the point about 'hacky CSS'. There's nothing 'hacky' about divs, floats and positioning, the concepts aren't going anywhere, and there's absolutely no need for yet another layout language added on to HTML: you'd end up replicating portions of CSS anyway.

Interesting article, not sure

Interesting article, not sure I will give up my CSS layouts just yet though.

@ Markus
You have a English link? I can`t read that.

You're kidding, right? Tables

You're kidding, right?
Tables are *not to be used* for a simple reason: css has been created to handle all the layout, the html (or, xhtml) should be used only for content.
So, embed tables in your html is really poor coding, I'm sorry about this, talking about it NOW, in the 2009.
Then, using "em" for text is *not to be done* for a simple reason: "em" is handled differently on different browsers. And it has been created (the em) to print something, not to be seen on a screen. This is beacause "em" doesn't handles pixels. So, when you use it on a screen and you want a text to correctly be displayed in a div "9px" height... you say font-size: 9px. It fits the div. End of the story.
Then, about people that writes cool css only for their monitor (and is using absolute positioning)... heh, there're crappy programmers, crappy writers, crappy politicians... and them :P
Absolute positioning should really be avoided, and before publishing something, they really should try to resize their browser :D
And... you should see html 5 and xhtml 1.1 (which is more strict than xhtml 1.0 strict, of course :D). That is cool :P

See you!

well it is some sort of true.

well it is some sort of true. a lot of messing with paddings and margins and widths and heights is gone using tables.
div's bring advantages if one wants to do a print.css (you cant hide columns that easy).

the box model is so complex no browser implements it fully. complex layouts using div's contain browser hacks almost every time. and you cant tell a div "use the same height as div with id ... (with flexible content)

at the moment i go towards some mixture. the general layout is done with divs as the print.css turns into very easy.
but things like forms? there is nothing better than using tables.