1 Simple and clean

Thanks for the article, it will definitely help to many people. I’ve already used negative margin in order to create a two-column layout with the equal height but didn’t think to use it with the three-column layout ;) As you said: Think “outside the box”! Thanks again.

posted at 07:16 am on February 06, 2007 by Neutrino X

2 Almost

Nice in theory, but I’m almost never going to be able to use this in practice, as virtually all my column layouts use background images in one form or another.

posted at 08:07 am on February 06, 2007 by Steve Dennis

3 Browser backwards compatibility?

Nice solution. But i think it’s not usable in real-life, because of less browser-backwards-compatibility. for example ie 5.5 and less crashes the layout… it workes fine in FF 2.0, IE 7.0, IE 6.0. but thats poorly not enough…

posted at 08:44 am on February 06, 2007 by Ole Hook

4 pretty close though

Interesting idea, not sure it would work if you use blocks that have white space between them though. Maybe it’s my cold, and I’m just not looking at it the right way, but hopefully this will get me going in the right direction. A very interesting article none the less!

posted at 08:45 am on February 06, 2007 by Fredrik Frodlund

5 How to double it?

Hello, great hack, but I tried to “double it”, i.e. having on the same page TWO blocks each containing the same two-columns layout one above the other:

so that blocks A and B would be of the same height, and C and D too… but I can’t manage to have it to work… All I get is that the second “row” is badly aligned to the left… Any help?

Thanks.

posted at 08:47 am on February 06, 2007 by olivier roux

6 nevermind

sorry about the previous spot, it’s too early in the morning and I had just misplled ;-) one of the selectors… silly me.

posted at 09:22 am on February 06, 2007 by olivier roux

7 to olivier roux

Container block of C & D should have {clear:left} :)

posted at 10:47 am on February 06, 2007 by Neutrino X

8 height: 1%

I find that using zoom:1; is better than using height:1%;

It has the same effect but doesn’t have to be put inside a * html block or conditional comments.

It has the same effect as height:1% in IE with the added bonus that you can use it on elements with overflow: hidden or auto, as it won’t make the element 1% in height.

posted at 11:02 am on February 06, 2007 by Jake Archibald

9 Unintended consequences

Opening a keylock with a paperclips is an ingenious and spectacular magician’s act. But would you seriously buy such a lock?

Using negative margins is an unintended use of the standard. Boxes don’t have negative margins. How a browser handles them is not a bug but an implementation choice (a respectable one being to simply ignore out of range values).

A standard defines what can be done, but also what should not be done (even if it can be done). This is where many css techniques abuse the standard.

I think this is a real issue. As a newbie, I buy solutions such as this one, thinking that I am investing in a solid foundation. Then I try to add a menu or an image or even a simple italic, and have no clue why things suddenly mess up. As it dawns to me that I am really investing in implementation exploits, I am ready to throw away this whole css mess altogether. Now that would be an unintended consequence?

My apologies if this sounds as a harsh critique on this work. It is a superb solution to a real problem. Only it requires a magician to make it work in daily life.

posted at 11:32 am on February 06, 2007 by Fred Reisac

10 Unintended consequences ?

I didn’t know negative margins were unintended. I use them pretty often (when ie6 messes up most of the time). Does the w3c documentation state its unintended to use negative margins?

About the actual multi-column technique: I really like it and might use it on a project scheduled for next month!

posted at 12:18 pm on February 06, 2007 by Gauke Pieter Sietzema