1 Untitled

While completely obvious, I never thought of applying the padding to the body. Also, it’s almost shocking that most of it works in IE. Excellent article.

posted at 12:44 am on January 31, 2006 by Tristan Dunn

2 Wrapping It Up

My favourite thing about this padding + negative margins approach is how agnostic it is toward the overall width controller.

So long as column widths are expressed as fixed or percentage, you’re totally free to throw any wrapper around it: fixed, percentage, elastic, jello, whatever. I had a great moment recently with a little site, where the client suddenly changed their mind and wanted liquid instead of fixed… it was about two minutes to change it up for them.

posted at 01:58 am on January 31, 2006 by Mike Purvis

3 Anomalies?

This is a great article, thx! A couple of questions though…

First, in your examples I’m seeing odd word spacing in the left and right columns..never too little space between words but often far too much.

Second, if I resize the browser I can actually get the left column to disappear depending on when I stop resizing…it flickers alot during the resize too (vertically only!).

Any thoughts?

Thx, Mike

posted at 02:45 am on January 31, 2006 by Michael Ennis

4 px bad, em good

An excellent technique, thank you for sharing it.

I was quite appalled, however, that an article published at ALA would promote the outdated practice of sizing with px units. If the author’s examples had used em units for the column widths, it might have resulted in a sensible layout on very high resolution monitors like the one I am using.

posted at 03:22 am on January 31, 2006 by Dan C

5 Interesting... will explore this technique for my blog's design

The simple CSS seems to be too good to be true. I intend to use this technique for my blog as soon as I get some time to rework the design. Thanks.

posted at 03:44 am on January 31, 2006 by Varun N

6 Disappearing left column in IE win

In IE Win, the left column completely disappears when I resize the height of the browser window using the bottom border of the window. Similar to the “flicker” that Michael Dennis talked about. No problem is Firefox.

posted at 03:57 am on January 31, 2006 by Sammy Dellicour

7 Almost there...

Very nice article! The margin-padding trick is new for me. Nicely done. Although some weird behavior of columns in some browsers when scaling viewport to less then 800px. Firefox will float-drop the right column and in MSIE6 the left column will move to the right…

posted at 04:11 am on January 31, 2006 by Marc van den Dobbelsteen

8 Firefox

Great technique!

Slight problem in Firefox (1.5) when you horizontally resize (width) the padding version, if you go to small the top of the right column moves down to the top of the left column.

posted at 04:22 am on January 31, 2006 by j i

9 Untitled

bq.Slight problem in Firefox (1.5) when you horizontally resize (width) the padding version, if you go to small the top of the right column moves down to the top of the left column.

that was mean’t to be bottom of the left column. try it and see.

posted at 04:26 am on January 31, 2006 by j i

10 hurrah!

technical stuff, at long last. welcome back ALA.

posted at 04:40 am on January 31, 2006 by ban jax