Preface: The following demo yielded results that basically didn’t work in IE. Although a better man may be able to figure this out, I was not able to dedicate any more time to the subject. So unless you’re ok with that, or can help me get past it, you may want to save yourself some time.

I was recently asked by a client to simply “take that right column content and stick it UNDER the left”. Sounds simple enough, right? But what if you don’t have access to the table? What if all you had were styles you could manipulate to simulate a new row? Well damn. Sucks to be you.

1: Here’s the table structure we’re stuck with. One row. Two cells.

Traditional layout of a 2-column table row

But what the client wanted was for the right hand column to be moved below the left hand column without editing the table. (For the sake of argument you can assume there were classes defined in the TD’s allowing us to have some CSS access.)

This is usually the place where I say “I’ll see what I can do”, knowing there’s nothing I can do. But I spent some time experimenting and the result was a solution that worked just fine…except in IE. Great. Things like this make me want to become a print designer.

2. So here’s my admittedly not very elegant solution.

Manipulated row where second TD falls inline UNDER the first in the same Table Row.

I started with some styling of the table cells setting up the parental structure necessary to position the divs nested in each cell.
Table cell one:
<td style="position:relative; height:200px;" id="div-for-td1">
#div-for-td1 { width:960px; position:absolute; left:0px; top:0px; display:block; padding:0; margin:0; }

Table cell two:
<td style="position:relative; height:500px; overflow:scroll; margin-top:-200px;" id="div-for-td2">
#div-for-td2 { height:390px; width:620px; float:left; position:absolute; left:0px; top:210px; }

Basically that’s it. I’ve used the td styling to set up the relative positions, heights and behaviors, while the div id selector dictates the actual position and size.

A few things to note:
First: The second cell holds content of an undetermined height. However because the container is floated it loses its hasLayout property (see: On having Layout), which means that the markup of the page does not respect the  height of the div and the content below it will overlap show through this div. Obnoxious, right? Second: And since a simple clear style or clearfix (see clearfix) didn’t work, i had to limit the table cell’s height and cap the content with an overflow:hidden;
also because I’m basically tricking the browser into ignoring the markup of the table, I had to use the specified height from the first cell as a negative margin in the second cell. Otherwise the browser would apply the height from the first cell to the second as you may expect, creating a 200px gap above the content.

Again, I’m not saying this was impossible. But having spent a fair amount of time on it, I’d say your best bet is to keep it simple and avoid this technique.

Say hello to EnergyCircle.com, a new online resource for home energy efficiency. Streamline the performance of your house and save some serious money while your at it with Energy Circle’s blogs, articles, instructional videos, and a wide variety of products for each room of your house. Check it out »

Additional props go to David Puelle of Portland, Maine for branding and art direction, while development credits go to Integra Strategic of Portland, Maine.

Check this out: http://www.homedepot.com

Beautiful vertical rhythm, hierarchy, varied value, and manicured line breaks make this menu beautiful.

There are a lot of negative things I could say about HomeDepot.com, like the unintuitive architecture etc. But instead I’d like to mention a VERY minor detail that I think 99% of designers would never think of. Let’s face it, the entire Home Depot experience, virtual or otherwise, is overwhelming. Take a look at the quicklinks on the left hand side of the site. They’re there to give you smarter access to the high-demand product areas of their daunting product selection.The type size hierarchy is gorgeous, the color variance ads a nicely priortized foil to the signature orange they could be over-doing (but they’re not), and the almost retro usage of the link underline is unmistakably usable.

But here is where I totally geek out. Notice how each category of links has two lines. Now, notice how the first line always ends with a comma. Why is that, you ask? Well whoever designed this menu (props) took the time to add a simple attribute to the links in this definition list to disallow the links from wrapping onto a new line. Essentially, this CSS author added the following attribute to the definition data type selector:

dd a { white-space:nowrap; }

This allows each line to end with a complete link. Why would anyone bother doing this? This is the usability quivalent of a print-designer manually setting type to clean up any awkwayd hyphenation. To put it another way, consider the user’s mentality when viewing this list. Am I looking for “Toilets, Tubs & Whirlpools?” or do I just want “Toilets?” Well, without this attribute, “Tubs &” would probably reside on the first line potentially causing confusion about where the which link is which and where each ends. I know I’m making to much of this, but I’d love to think that someday, someone might spaz over my attention to detail like I’m geeking out over this right now.

You’re probably aware of the anti-comic sans movement among designers and assorted type snobs (see ban comic sans). But while we’re hating on god-awful typefaces designed for Microsoft (notice a trend here?) let’s toss Trebuchet into the mix. Despite gaining popularity in the “aren’t I cheeky?” blog era of the web for its universal availablity (see: ubiquitous mediocrity), Trebuchet MS is contributing to dumbing down interactive type design.

• Trebuchet’s clumsy weights allow little room for elegance.
• Its awkward, schizophrenic features (“g”, “l”, “&”, “$”, “?”) distract the eye’s natural rhythm and decrease readability.
• Drastically inconsistent x-heights (“A” vs. “x”) establish jarring vertical agreements.
• The ampersands (“&”) is a ligature of a bad “E” and a stumpy “t”. That’s just savage.
• You can’t just throw in a half slab-serif whenever you feel like it (“i”, “j”). Were you raised in a barn?

While I’m all for experimentation and destinguishing yourself from the competition, this font has been abused in recent years. And while I may have been able to overlook its childish qualities in small doses, the time has come for someone to stand up against type that sucks. I simply can’t overlook it anymore. And I urge you to write your congressman and/or local web designer to reclaim our dignity and stop abusing this heinous face.

Being that so much of our industry is perception turned reality, I’ve decided to start a professional blog. My wife, Sarah and I will keep posting to our personal adventure blog, but this will be a place for me to expound on my ideals as an interactive designer. You may see some subjective commentary, jaded criticism, or blatant self-promotion here, but isn’t that what it’s all about?

Here, you’ll be able to read about many aspects of interactive design like layout, typography, usability, user interface, design trends, CSS, Flash, Photoshop, social media, new apps, link-sharing, and most importantly, respect to quality work around the internet.