Negative Margins = IE cutoff

[mikepurvis]

EDIT 2: The current version of this is here (http://uwmike.com/layout/jello/holly.php).

I'm working on a layout where I'd like to have a div punch-out, but IE cuts off anything outside the parent element. Relative positioning isn't an option, because I'd like it to punch out of both sides of the parent.

An extremely simplified demo of the bug is here:

http://uwmike.com/layout/jello/error.php

I didn't see a P.I.E. page about it... anyone know anything or want to recommend a fix?

EDIT: Nevermind, I've seen this page (http://www.communitymx.com/content/article.cfm?cid=B0029&print=true), and it now mostly works, after float:left-ing and position:relative-ing the box. But now it's really jittery in IE: http://uwmike.com/layout/jello/jitters.php (plus, the float seems to have caused Firefox to stop centering it properly...)

EDIT 2: Whoops... with a little holly hackery to hide the float, and some relative positioning after all, here's a version of the layout (http://uwmike.com/layout/jello/holly.php) that works in Firefox, IE5, and IE6. Could I get a Safari and IE/Mac test, please?

[Sanim]

(http://home.earthlink.net/~lotrme/images/erm.gif)
How big did you make that!? Notice the bottom scrollbar in the image.

[mikepurvis]

I'll be writing more about the rationale for this design at some future point, but in a nutshell, I think it's a better way to do a liquid layout because instead of a pure percentage, it's a fixed width, plus a percentage of the remainder. It has a much more natural minimum width, and it doesn't get as wide as quickly.


My original mechanism for doing it was two negative margins-- one to punch out of each side of the middle column. However, IE didn't really go for that ('jitters'), so I changed it to one huge negative right-margin with a big negative left relative positioning to pull it back.

Now IE and Firefox go for it, but Safari's got a scrollbar. If you wouldn't mind, could you check the 'jitters version' (http://uwmike.com/layout/jello/jitters.php), please, and try resizing? If it seems to be okay in Safari and Opera, I think I'll just feed the relative-positioned version to IE, and let everybody else get the original one with the two margins.