IE's hasLayout in short

25 August 2011

There are many articles written on IE's hasLayout property, but I'd like to summarize a good article I found on this subject.

What is hasLayout?


This is a property microsoft's IE uses to set to TRUE for elements that are layout elements. For example, a DIV with dimensions set is a layout element. A DIV without dimensions (such as a wrapper for some floating buttons) hasn't got the hasLayout property set to TRUE, so it is no layout element.

What are the consequences?


If you'd like to have floating elements inside a DIV with a backgroundcolor, you'd need to add an element before the closing tag with a clear: both definition on it to "clean" the floating divs and force the container to "get dimensions" and displaying it's background color.

<div class="container">
    <a href="#">Flotaing button 1</a>
    <a href="#">Flotaing button 2</a>
    <a href="#">Flotaing button 3</a>
    <div style="clear: both;"></div>
</div>


Downside to this technique is that you'll have to add empty div's everywhere in your code.

What's the solution?


One solution is to add an overflow: hidden (or auto, or visible) to the element to trigger it to become an layout element. Doing this , you no longer need the extra cleaner element in your HTML code.
But for IE this only works from version 7 onwards. To trigger the element to "gain layout" in IE6, add the zoom: 1 property. The zoom property is not supported in IE5, but hey...

What's the catch?


Zoom is an IE-only property wich will fail your CSS in validators. In practice it doesn't break anything, but if you persist on writing superclean CSS and if you like your CSS file to pass the validators, you should put all the zoom properties (or one zoom-class) in a seperate file that is only included by IE. You could use libraries such as Head.js to detect browsers and include stylesheets for specific browsers.

Other elements that trigger hasLayout


These elements also trigger elements to have layout in IE:
  • width, height (to 'auto')
  • max-width, max-height (to 'none') (in IE 7)
  • position (to 'static')
  • float (to 'none')
  • overflow (to 'visible') (in IE 7)
  • zoom (to 'normal')
  • writing-mode (from 'tb-rl' to 'lr-tb')

The long story


If you'd like to read more on this subject, I recommend you to read this page.
You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!

0 comments

Please feel free to be the first to comment on this page!

By placing a comment you let me know i'm doing a good job. It doesn't have to be constructive, just a "awesome!" makes me really happy! You contribute to a better world!