The demonstration below is made up of two DIV elements and one P element. The hierarchy looks like this:
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.
Open this page up in IE. Try resizing the window and see how the text moves with relation to the left-side border of it's containing paragraph.
WHY THE FUCK is the text NOT LEFT ALIGNED WITH THE BORDER?! The PARAGRAPH element that contains the text holds the left-hand border. There's no child element inside the PARAGRAPH. There is NO FUCKING REASON for the text inside the PARAGRAPH to be located in a COMPLETELY DIFFERENT LOCATION than it's containing PARAGRAPH.
Now let's trigger hasLayout
on the light gray box and see what happens. We'll do this by setting height: 1%
with an inline style.
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.
Oh, HEY, IT WORKS! We should just trigger hasLayout on every block element. Then everything will act like normal, right? NO!