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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.fruitysolutions.com philwilks

    The article is refreshingly candid about the bugginess of the browser

    I couldn’t agree more! Bugs aren’t quite so bad if the vendor is willing to admit to them.

  • Dr Livingston

    Thanks for the insight of this browser… Is it a browser? I don’t actually know anymore,

    > The article is refreshingly candid about the bugginess of the browser.

    That is very kind of them wasn’t it? Not… Considering just how bad this browser is, they’ve got a hard neck to make a shout about how great their ‘buggy’ browser is in the first place

    :mad: :lol:

  • Sergeant

    The thing i don’t really like is that they knew this since the browser was released.

    Why do they tell this when a new browser is in development?

    Ah well, the IE team is awake now, that’s a good step forward

  • Corax

    > The thing i don’t really like is that they knew this since the browser was released.
    > Why do they tell this when a new browser is in development?

    Me thinks they are telling us how to fix those bugs now because very soon there will be a whole new set of entirely new bugs and we won’t need to fix the old ones any more.

    It would be no fun, really, if we knew how to fix all the new bugs right from the begining, wouldn’t it? Or even if we knew what bugs there were…

    > Ah well, the IE team is awake now, that’s a good step forward

    One would hope so, but I’m afraid they’re awake only because the show must go on. With their track record, only time will show.

  • Asimov

    It’s good that Microsoft are finally starting to wake up to the fact that developers are no longer prepared to tow their proprietary line, or accept no support for five straight years. I suspect they’ve been forced to by the open source and open standards movements and developers demanding they stick to standards or else they’ll go elsewhere, and the fact that they can’t squash openness the way they have previously done all major competitors.

    Frankly, for me it’s all a case of too little, too late. I’ve already replaced every Microsoft app with an open source equivalent which is at least as good (often, as in the case of Firefox, better).

    Anyway, it has to be good that everyone’s getting on the same wavelength, especially since the average Joe is probably going to still be using an iteration of IE for many years to come. I just doubt many developers will be so trusting of Microsoft in future until they’ve proven their bona fides many times over. And I suspect all the IE7 improvements will be standard in Firefox within months, although most are probably there already.

  • Pingback: Terrapin Station » Got Layout?