Why CSS sucks big time for layout

May 28th, 2009 | Posted by admin in css - (0 Comments)

I used tables for designing sites from the beginning. And from the beginning I had been using Dreamweaver for designing.
Designing layout with Dreamweaver using tables is no-brainer. Its dead easy to visually manipulate pretty much all aspects of design.
I always considered Dreamweaver a very productive tool. I think it beats everything when it comes to rapid prototyping.
But after really getting curious about all the CSS-P buzz floating around the internet, I decided to look into the ultra-hyped DIV based design using CSS or referred in short as CSS-P..
And All I could hear everyone claiming was people using tables for layout are village-idiot equivalent for designing. And I heard all these people claiming that tables are only used by people who find themselves reluctant or unable to shake off the legacy of last century.
And how semantics mattered and how un-semantic design was deplorable.

And suddenly I found myself worried because I neither liked to be the village-idiot equivalent of design world nor liked being tagged a man from the gone-by century, reluctant to change and still clinging to the world as I knew in that gone by century.

I did a lot of research and I must have read every blog by hippies who claimed to have found the holy grail of 2-column ,3-colum and liquid design.
I eagerly trialed out all those holy-grails. I was overwhelmed by the amount of hacks that was required to create simple designs that I considered no-brainer when I designed them using tables. But I didn’t let those insane hacks deter me in my quest to become a better designer.

I was rewriting a CMS I developed at that time and I was busy developing a site for a client using my home-grown CMS.
The site was already in production and I had some back-end stuffs to fix.
And while I was at it, I decided to redesign the front-end that was table based using DIVs and CSS.
And I had fairly good success although I had to use some javascript to give me what I wanted. Of course the overall design was very neat. But after 3-4 weeks shit hit the fan, let me tell you.
Every aspect of the site was dynamic, and depending on the page and user, the site had to shrink and grow. The main content area and the sidebar especially. When the content started piling up and the sidebar needed to grow, the content started bleeding out of the sidebar. And when I fixed that the main area for content started bleeding.
It was a nightmare.

So, there I was again trying to redesign the site again to fix the site up to bring it to a usable state.
And I had no choice but to bring in tables. Gasp! Horror!
That’s the sound of indignation of CSS purist at my blasphemous mention of tables for layout design.
The hybrid layout did the trick and fixed all the bleeding but I still needed a little help from javascript to give me the desired effect.

Here’s how I needed the layout to be, and CSS/DIV failed me vary badly.
layout1

From that time on I have decided I’ll never listen to religious CSS Purist out there who just design some lousy static site and claim they know it all.
And one argument that I totally utterly despise from CSS purist is that “ YOU DON’T KNOW CSS, THAT’S WHY YOU CAN’T DO THINGS PROPERLY’.

That smell of arrogance gets me more than anything else.

CSS is not the end itself fellows, its just a lousy mean to an end.

And you can take your semantic argument and shove it up where the sun never shines.
When the purists harp on about semantics it sound like nothing more than priests harping on about abstinence and the need to keep yourself pure to respect god’s law, thou shall not screw until you are married.
Anything that takes such religious form is very far removed from science. And web-design has shit-load more to do with science than it has to do with religion.

My brother is an artist, his specialty is water color. Mostly he designs by just sketching out coarse outline in pencil and applying color to the canvas.

But when he need precision in his art for say a portrait, he draws out grids in canvas with pencil and starts sketching and then fills up the sketches with paint, and the paintings come alive.
He is a self taught artist and though he never took art classes in his school or anywhere for that matter, yet intuitively he uses grids to get a better layout and precision of his paintings when situation demands

What does that tell??

Maybe nothing, maybe something…..

As for me, it tells me that grids help us organize/arrange content in a layout in an intuitive way, be it an artist’s canvas or a web developer’s HTML markups.

But, on the other hand, using CSS for layout is a fundamentally flawed concept. The concept of emulating table layout with a ton of CSS hack has serious flaws. BOX-Model is conceptually flawed model for designing layouts.
Common sense tells me that if something has a borders and padding, those structures should be contained within that element that gets decorated. It shouldn’t affect its surrounding environment.

Think of it this way. If you want to create fences around your house compound, do you force your neighbor to restructure his house and his compound so u can add a fence (border?? ) or do u just build a fence within your compound??
What if you want to build a really thick wall? Does that mean your neighbor had to make a bigger adjustment? IF your neighbor’s house is very close to the border of your compound, does that mean that your neighbor has to demolish part of his house to accommodate your really thick walls??
Think about the chaos it ensues were things like that in reality.
The side-effect of any structural changes or decoration should only affect only that element and the rest of the elements in your layout shouldn’t have to suffer as a consequence.
Makes sense?

Pragmatism tells me that tables make more sense for layout, but of course all CSS purist will gasp in horror when they hear it.
Every time someone says they prefer Table based layout or hybrid layout, the purists seem to think that those people are against CSS.

Before complicating things too much with purist headset, one should ask themselves a very important quesiton. Is CSS/DIV layout answer to all question?
IF not are there other alternatives to your problems?
IF so and if the alternatives work for you what will stop you from using it??

Oh, I know the answer to the last question for most purists and CSS-P fanboys. ” But, its semantically incorrect…. and it has previewed drawbacks …”.
One thing to keep in mind is all these damn tools available to us have only one purpose, to aid us in our development. So they are supposed to serve us.
So the question is what are semantics for? I don’t serve CSS or W3C, I make CSS serve me the way I see fit for a given situation.
IF CSS doesn’t work for me I don’t cry myself to death or spend days trying to solve something that can be done in an hour using something else.

And one funny argument I keep on hearing is that screen-readers get confused when one use tables for layout because screen-readers take content inside a table as being tabular data.
Hello, people who write those damn things aren’t half that stupid. And screen-reader have been in existence long before this CSS-P fever gripped the general 20-something mass of new breed of wide-eyed designers.

And, by the way, I’m not  a designer by profession.