Got Layout? Internet Explorer’s page layout secrets

Share this article

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.

Kevin YankKevin Yank
View Author

Kevin Yank is an accomplished web developer, speaker, trainer and author of Build Your Own Database Driven Website Using PHP & MySQL and Co-Author of Simply JavaScript and Everything You Know About CSS is Wrong! Kevin loves to share his wealth of knowledge and it didn't stop at books, he's also the course instructor to 3 online courses in web development. Currently Kevin is the Director of Front End Engineering at Culture Amp.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form