IE Percent Bump

IE's Layout Engine Sucks

Now let's start getting into some seriously not complex layout techniques like negative margins. We'll begin with our previous example without hasLayout triggered on any of the elements.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam euismod ipsum quis lorem tristique lacinia. Aliquam diam sem, posuere vitae, fringilla sed, euismod in, lorem. Phasellus in turpis vel lacus tristique hendrerit. Fusce pharetra arcu. Phasellus cursus est vel quam. Vestibulum ullamcorper adipiscing nisi. Maecenas facilisis auctor ligula. Aliquam erat volutpat. Etiam lacinia eleifend turpis. Praesent accumsan aliquet diam.

Now let's move the gray box to the left using negative margins. Percent values are based in the parent element's dimensions. The official W3 box model says padding should be separate from defined width. Since the dark gray box has left-padding of 50% (that's 50% relative to it's parent element's width, in this case the BODY element), it's width would also be 50% relative to the BODY element. The light gray box is 100% the width of its parent element, the dark gray box. This means a left-margin of -100% should pull the light gray box all the way to the left.

NOPE! IE includes the 50% as part of the total width of the dark gray box. Every other browser, (like Firefox, Opera, Safari) the ones that CORRECTLY follow the W3's box model, get it right. So let's try -50% just to prove the point:

And it works. OH GOODIE. But wait, it turns out that if you triger hasLayout, IE starts to correctly follow the W3 box model. FUCK! Not more hasLayout bullshit! Let's set the light gray box's left margin back to -100% and trigger hasLayout on it as well.

What the fuck?! It's all fucked now. Where'd the light gray box go?! Wait... maybe if we trigger hasLayout on light the gray box instead it'll work.

SWEET! Except the black border on the left is missing and in IE7 the light gray box seems to keep going offf to the left for some reason. Well, what if we trigger hasLayout on both? We did discover earlier it seems to be an all or none situation, right?

What the FUCK happened now?! The black border is back and the light gray box doesn't go off to the left anymore, but instead of extending the box to the left the negative margins are acting like we used relative positioning rules.

And there's another problem.