(Why is it important to look good naked? Well…you never know who might be using Links… cough cough)

With floats, you have to be sensitive to where elements are placed in the flow of your code. The element being floated always has to precede the element it floats around. This can weirdify your naked site (and your code) if, for one example, you have the following 2-column situation:

If you were to use floats to throw the nav to the left like that, the code for the nav would have to come first in the code sequence. This would be akin to a book where the table of contents is on the cover, and the title is on the inside first page.

In this one website I’m currently coding, there’s even more weirdness because I designed it in a kind of unusual way. I didn’t even realize just how unusual it was until I started coding it. Anyway, most of what you’d normally consider the “header” is actually vertical and on the left of the content, and the main nav is to the far left of the “header.” There is also a separate text part of the title that appears above the content, but still next to the header. Finally there’s a Quick Links bar at the very very top. (Link soon… It’ll explain better.) Without absolute positioning, this could be disastrous. The order of the code would have to be something like:

• Quick Links
• (little decorative animation)
• Menu
• Header
• Header Title
• Content

Stripped of CSS, the page wouldn’t even say the title of the website until halfway down the page. Hardly ideal.

But if you absolute position, you can rearrange it to something that makes more sense because absolute positioning doesn’t care about order. You can position something at the top of the page even if it comes last in the code. So instead of the above, I could do something like:

• Header
• Header Title
• Quick Links
• (little decorative animation)
• Menu
• Content

… which, sans CSS, results in a site that looks like it was made in 1995, but still makes a lot more sense than the version above.

I think, in general, I am liable to stick with floats for all but the impossibly weird layouts that I’ve made. Floats just seem to make more sense to me because they are more fluid and flexible, shifting up and down the page according to the size of the content. Absolute positioning is… well, absolute. It always stays in one spot no matter what. It definitely should not be used for images accompanying text, for example, unless you are a masochist. Another good thing about floats is that they stretch out containing elements if you put a clear right below the float (and still inside the containing element). This is useful for backgrounds that go behind the full length of the floated element. Impossible with absolute position, unless, again, you are a masochist and like calculating numbers with Javascript.

But if semantics are at stake, then it’s better to throw in some absolute positioning to supplement the basic floated structure.

Every site one codes is a little different, so it depends totally on the situation. I learnt this the hard way—before, I thought you only needed to learn how to code a website once and then you could code any site out there. I was… wrong to say the least. Anyway, this is kind of fun in its own way… solving the puzzle of HTML in such a way so that all users can be as happy as can be. Yippee.

Writing an HTML email is like taking a regressive leap 10 years into the past. Mangled, reinterpreted markup; wildly inconsistent rendering; table layouts and font tags everywhere. Aeiieeeee!

But in case you need to dive into this mayhem, here’s how you’d do it:

• Writing cross-client HTML email – emtek.net.nz
  
• Email Design Guidelines – CampaignMonitor.com
• CSS Support in Email (2008) – CampaignMonitor.com
• Video in Email – CampaignMonitor.com (long story short: you can’t do it)