Got Layout? Internet Explorer’s page layout secrets

When it comes to laying out a page in CSS, do you know what it means for an element to “have layout” in Internet Explorer? If not, you might be missing out on a useful tool for overcoming CSS bugs in that browser. Then again, you might be missing the explanation for the very bugs you’re dealing with.

In Internet Explorer’s inner workings, each element on the page operates in one of two modes when it comes to layout. Either it allows its ancestors to affect the positioning of its contents, or it simply grabs a rectangular area of the page and does all the layout of its contents within that rectangle. Elements that do the latter are said to “have layout”, because you can detect them by checking the IE-only hasLayout property using JavaScript.

It turns out that forcing an element to “have layout” is one way to overcome CSS bugs in Internet Explorer. For example, Internet Explorer has a number bugs that cause floated elements and their descendents to be positioned incorrectly due to the influence of their parents or other ancestors. By tricking a floated element’s parent into “having layout”, you can eliminate that unwanted influence, which will often allow the floated element to be positioned correctly.

Unfortunately, because elements that “have layout” ignore their ancestors, they don’t always behave the way you expect them to. They can’t have overflowing content, for example, nor will they wrap around floated elements. In essence, “having layout” gives Internet Explorer permission to bypass some of its buggy CSS code with simpler code that can often get the job done by ignoring page layout standards.

Forcing an element to “have layout” can be as simple as assigning it a fixed width. The most famous application of this technique is the Holly Hack, though when it was published in 2003 no one knew about “having layout”… it was just a hack that seemed to work. Now that Internet Explorer development is back in full swing and the IE team is talking to standards groups, we are beginning to get insights into these obscure details of the browser that explain the more schizophrenic aspects of its behaviour.

A newly-published article by Microsoft gives a short but useful summary of “having layout”–which elements have it, how other elements can get it, and how they behave once they do. The article is refreshingly candid about the bugginess of the browser. If you want even more detail, you can spend a quiet afternoon with On having layout, a long and detailed treatise on the subject of “having layout”, and the many ways that it can help or hinder your CSS layout efforts in Internet Explorer.