9/2/2005

dotlinelinedot dotdotline linedot linelinedot dot linedot line linedotdotdot dot dotline dotdotline line linedotlineline linelineline dotdotlinedot linedotlinedot dotdotdot dotdotdot dotlinedotdot dotline linedotlineline linelineline dotdotline line dotdotdot

Pungent beauty of css layouts

Filed under: — Mikolaj at analog clock showing 10:24

In the pre-style times if one were to create a layout using tables it would be more or less something like:


<table>
   <tr><td colspan="3">header</td></tr>
   <tr>
      <td>column1</td>
      <td>column2</td>
      <td>column3</td>
   </tr>
   <tr><td colspan="3">footer</td></tr>
</table>

Giving a layout like this:

three column table-layout

And then the styles came, and suddenly everyone started looking for the holy grail of css layout. And the holy grail looks something like this:

uneven three column layout
or like this:
uneven three column layout
the beautiful end-effect whimsically depending on the length of the columns.

Now what’s so great about it? “Artistically” speaking - the uneven columns bring the feeling of life, a certain
dynamic tension inherent in the page. Oh, bs!

Somehow, most of the pages you see nowadays have such foul looks. Sometimes people conveniently mask this by making everything have the same background color, sometimes the main column is so long, that one doesn’t realize the uneven looks. Nevertheless they’re still there.

Is this the super-duper advantage of css layers over html tables? OK, css gives the separation of form and content, solves many accessibility issues, gives support for different media. That’s all fine, but when I hear that css gives more control, then I ask - where? Because definitely not in the area of simple even layouts.

Would you want to live in a house with each of the walls having an arbitrary height? Ehm… that’s not the best example

Disclaimer:
I do not make web pages for living, so I didn’t spend much time investigating, and bluntly added a javascript to even out the columns on this very page (tho it worked correctly in IE5 without any script whatsoever). I assume that since everyone out there has these ugly uneven columns, there is no clean css-only solution to this. (???)

Leave a Reply

Internet Explorer ≥ 5 , Netscape ≥ 6 , Mozilla ≥ 1.4, Opera ≥ 6
Mikolaj Swidzinski