Naepalm

I sometimes wonder if the most hated aspect of design is the three column layout.  Or really, any layout where your primary content is in the middle, directly surrounded by two far less important segments.  Strangely enough, this seems to often be the most used design type on the web.  Three columns functions well for holding a wealth of useful (or useless?) information in a nice organized format.  Right...?

Personally, I wouldn't mind getting rid of them all together.  I hate having extra mark-up for the sake of design, and I suffer for that personal bias constantly.  The most common technique that I know of is putting an extra wrapper around your content and third column and doing some absolutely wonky things with floats.  And then, hoping your revolver in your desk drawer is full of bullets when it's insisted upon that the site's layout, at the very least, functions in IE6.

And, on a side-note, might I ask... why does anything need to function in IE6?  Why do we even care about IE6?  And even more importantly, why are people still installing old versions of Windows XP that they dusted off out of their desk drawer (where it sits right next to that revolver) and then not upgrade their browser?  You don't have to use Firefox, Safari, Opera, Chrome heck... even IE7 is better than that.

Back to the layout.  It's been a goal of Kyle's and mine to find some way to do a 3-column layout that works without a wrapper.  One of the nice things about working in this field is that the job is always challenging, and there's a new problem to solve around every corner.  Of course, until you're unable to solve it and then you go looking for that revolver... again.  How many bullets are left at this point? (And on that note, don't open this site in IE6 or you'll lose one more).

We tried a few funky things with some negative margins using a percent base, and then - of course- when trying to recreate what was done after hours of long consideration (and just plain guess work), it ended up being impossible to do again.

A couple weeks ago, though, I was working on one of these Banes of Janae's Existence, and trying then to debug the horrendous thing in, yeah, you guessed it and I'm not going to say... and Kyle pops out of the wood work and says "Hey, try this!"

Have I ever mentioned that I'm jealous of his timing?  I am.

The basic premise:

1. Have a single wrapper named content or whatever you like.
2. Make sure that it has a right padding as wide as the third column and an overflow: hidden to clear floats
3. Okay, this is where it gets confusing.  Float the first column to the left and give it a margin-left large enough for the second column.
4. Float the second column to the left, giving it a negative margin-left that is the sum of the first and third columns.
5. Float your third column to the right and give it a negative margin-right that is the width of itself.

Note that whenever I'm talking widths here, I'm considering the actual width of each column plus whatever padding is on it.  Remember, also, that each column must have a specified width.  I haven't fiddled with it too much in percentages or ems, but if anyone else does, I'd love the feedback.

Here's the example with the CSS.

Three sites later, and it still works like a charm.  No extra mark-up, just content box and the three columns inside it, and not even the Dean Edwards script needed for anything but PNGs in IE6.  Life is good.  Even if I didn't solve it myself.

When I started working at Mindfly almost a year ago (only about 20 days to go until I hit that mark, yay!) we were just starting to implement moving into CSS3 styles on objects and really focusing on the differences between browser capabilities. We're all aware, whether it be through rants on this blog, on our personal blogs, or through very frustrated tweets, how much of a pain Internet Explorer 6 is when it comes to making websites functional in such an old browser. And, when I say functional, I mean just that. We don't even demand that our sites look the same (in fact, we often insist that they don't), but merely just work in that poor dying horse of a browser.

That said, this blog post isn't about ranting about IE6, no matter how easy it is to do.  What I really want to talk about is the fact that yesterday, Firefox 3.5 came out.  Here at Mindfly, we've been waiting with baited breath to see it (not only be a faster browser, which is their big selling point) implement some of the quirky things that other browsers have put into play or that they're taking onto themselves.

For some time now, we've been working with things like rounded corners that function in CSS3, but do not validate for CSS2, nor work in all browsers such as Internet Explorer.  However, with IE8 coming out a few months back, Safari 4 shortly before that, and now Firefox 3.5 yesterday, I really feel like browsers are moving forward into a new era of making my life easier.  Despite the fact that IE still doesn't support rounded corners.

I've been talking about typography for some time now and our options with it.  At first it was image replacement, @font-face, and sIFR.  More recently I discussed the awesome use of cufon.  Now I'm going to take a step back and say that thank heavens Firefox 3.5 has introduced support of @font-face.  Legality issues aside, as that's a can of worms on it's own, Firefox, Safari, and Internet Explorer (amazingly) users will now be able to view sites that use @font-face with no extra work included through javascript or flash.  There are rumors that Opera 10 will also be supporting this.  If you want tips on how to put @font-face into your site, Kyle has written a great blog post about it.  I am reminded, unfortunately, that one of my favorite browsers - Chrome - is not supporting @font-face.  Yet.  We can only hope that Google will implement it in the future (it can't be that hard, can it?  Safari is a webkit browser as well!).

What are some of the other things that Firefox is implementing for us designers out there?  You can get the full list at developer.mozilla.org, but my three favorites are:

1. Text Shadow: No longer will we have to use image-replacement to get text shadows in Firefox!  Huzzah.
2. Box Shadow: Since Safari and Chrome both support box shadow, it's nice to see Firefox jumping on the bandwagon and making it easier for us to add nice little shadows to items on our sites that aren't text.
3. CSS Transforms: let me just say this (as it's only one of many) - :nth-child!  If all browsers supported this, my life would be complete.  I can't even count the times I have to select item 9 in a list of 13.

I'm looking forward to the chance to play around with all the new features and see how sites will render across browsers now and in the future.  I also have to give Mozilla a thumb's up for their continual work to allow us to easily make sites look gorgeous in their browser.  Between their support of plugins like firebug, the web developer toolbar, and colorzilla, I can't imagine trying to build a website without them.