CSS Web Site Design Hands-On Training

Specifically what is it about CSS that drives me crazy? I am the most evil of ancient dead wood. I am an HTML table man. I got by using tables and got on with my life. I never questioned what I did. I co-worker began beating the drum of usability and web standards about 5 years ago and eliminated tables from his web designs and re-designs. I clung to tables every time somebody pitifully ask me, “Could you make a website for me?”. Usually it was no more than a two cell table to enforce a two column style layout. Picture and text both in their respective cells. Nothing complicated our out of control.

The day of reckoning is now, I am finally “learning” how to use CSS to enforce the old 2 column style web page I always would get asked to make for people. That’s right simplicity in it’s most essential form. But here’s the rub, you absolutely need to know what you are doing. You need a guide to help you navigate the idiosyncracies and vagueries of the CSS Box model and CSS Layout algorithms. What’s that?!

Even at this late stage in the evolution of CSS, HTML, CSS2, XHTML and CSS3 and beyond there’s no tag, no markup, no code that will let you express this simple idea:

Create 2 columns (picture goes on left, text goes on right)

No, in fact what I’m learning from Eric Raymond’s book written under the aegis of Lynda.com is you need to know how the CSS box model including margins, and padding interact to force the web page to render as you intend it to. While creating a DIV element is stragithforward and having DIVs sit comfortably next to one another (like those old 2 cell tables) getting them to render correctly as the web browser grows and shrinks is tricky.

On page 131 of CSS Web Site Design, Eric Raymond states (pull quote indicating use of padding in the #content DIV and the negative margin for the #sidebar DIV). This kind of precision with rendering the DIVs is absolutely necessary to replicate the old HTML table formatting. But the workaround, or magic or trick to it all is reading or learning from someone else the fact that a DIVs width is determine by it’s stated width + the margin. If you set the margin to be a negative (which is allowed) the browser effectively subracts that amount from the stated width. When the two numbers add up to -1, the web browser ‘ignores’ the DIV and lets it do whatever it wants. In this example that Eric Raymond uses the sidebar DIV pops up to the same height as the content DIV. Previously, the sidebar had to sit all the way to the right, until the browser go to small, then it would suddenly pop-down below it’s neighbor. With a negative width, the browser doesn’t see the sidebar div and leaves it alone, it doesn’t popdown, it stays right where it is.

The other half of this equation is to leave generous amounts of padding in the content DIV.  The giant field of padding allows the ignored sidebar DIV to occupy some nice open whitespace, without stomping on any text in the content DIV. So extra padding on left hand DIV, negative width on the right hand DIV and you have the functional CSS equivalent of the two cell table of yore. Wow. I understand the necessity of doing this, I know all the benefits of adhering to accessibility requirements, and maintaining web standards. Nobody should be discriminated against because the website wasn’t designed the right way.

My own conclusion however is that while CSS does a lot it suffers the same problems as we had under all previous web design regimes. To accomplish the simple stuff, requires deep, esoteric knowledge of the workarounds. That is what differentiates the Dreamweaver jockeys from the real web designers, they know the tricks and employ them to get the website to look like the Photoshop comps. And it’s all searchable, and readable using screen reading software. But what a winding, twisty road to get there. It’s not rocket science, but it ain’t trivial either.