Floats on Separate Layers

So today I was creating a page for a website when I came to a fun fork in the road. I wanted to place a <\img> beside and <\h1>. Seems simple enough make one of each float the <\img> left and everything looked dandy. But then the <\h1> was pushed right against the <\img> and this looked kind of goofy so added padding to the h1 to make spaced out from the <\img>. I refreshed the browser and no dice, nothing happened. So I add margin to the right of the <\img> and it worked hooray. Everything seemed fine and dandy so I show my work to the mighty Shawn Pick and he says it’s wrong, it doesn’t work properly. I’m starting to get used to that saying. Even though it visually accomplished what he wanted the problem was that part of the <\h1> was under the <\img>, hence why padding the <\h1> didn’t work at first.

The <\h1> is still rendered behind the <\img> and he wanted this fix. So I read a bunch and asked questions until he finally broke down and told me. I wrote this post as a reminder more than anything but hopefully someone else will get some use out of this. There is a bug in IE where the float is rendered on a separate layer from the <\h1>. This is why the <\h1> pretends like there is nothing there. He referred to it as the “hasLayout” problem. You have to force the browser to use layout of the different layers together. The easiest way to solve it give the <\h1> a property of overflow:hidden. It’s not an entirely difficult problem but definitely one worth keeping in the memory bank.