On having layout

A work in progress.

This version:
Rev. 5 2005–10–27
Table of contents



hasLayout — A Definition

“Layout” is an IE/Win proprietary concept that determines how elements, in analogy to a window, draw and bound their content, interact with and relate to other elements, and react on and transmit application/user events.

Microsoft developers decided that box-type elements should be able to acquire a “property” (in an object-oriented programming sense) they referred to as layout, or alternatively, hasLayout.

hasLayout is probably neither a property or even a behavior, but rather an engine-inherent rendering concept which gives a quality to an element.

This rendering quality can, in fact, be irreversibly triggered to true by some CSS properties, and some HTML elements have “layout” by default.


We speak of an element “having layout” or “gaining layout” or say that an element “has layout” when we assume that the Microsoft-proprietary property hasLayout is set to true. A “layout element” can be any element which has layout by default or has gained layout by setting the appropriate CSS property.

In “non-layout” elements, hasLayout was not triggered, i.e. a pure div without a dimension can be a “non-layout ancestor”.

Giving or applying “layout” to an element that does not have it by default involves setting a CSS property that triggers hasLayout = true for the element in question. See Default Layout Elements and Properties for these listings. There is no way to set hasLayout = false other than to remove the CSS property that caused hasLayout = true in the first place.

The Hand We've Been Dealt

The hasLayout problem affects designers (and coders) at all experience levels. Layout has unusual and hard to predict effects on the display behavior of boxes that “have” layout, as well as implications for child elements within the boxes.



Where Layout Comes From


Default layout elements

The following elements appear to have layout by default, even if the MSDN documentation is not clear about this.

We have tested most of these elements by applying the MS filter-property or by checking the hasLayout script property.



position: absolute
float: left|right
display: inline-block
width: any value
height: any value
height: 1% is used in the Holly Hack.
zoom: any value (MSDN)
writing-mode: tb-rl (MSDN)
MS proprietary, does not validate.

Notes on elements at inline level



The hasLayout script property


Note once an element has layout, there is no way to set hasLayout = False.

The hasLayout-property can be used to check if an element has layout: If, for example, it has “eid ” as id, than simply writing in the IE5.5+ address bar javascript: alert(eid.currentStyle.hasLayout) tests its state.


CSS hacks

The following hacks to trigger haslayout have been well tested in IE6 and lower. Future versions of IE might react differently. We will revisit this when new versions of this browser are publicly available.

John Gallant and Holly Bergevin published the Holly hack in 2003:

  1. /* \*/
  3. /* */

Or we can use the underscore hack:

  1. .gainlayout { _height: 0; }

Alternatively, and possibly more future proof, are conditional comments:

  2. <style>
  3. .gainlayout { height: 1px; }
  4. </style>
  5. <![endif]-->


  3. <!--[if lte IE 6]>
  5. <![endif]-->

We prefer height: 0 and 1pxheight should “always” be used unless it conflicts with something else (overflow: hidden). About the value, we prefer to avoid 1%, since it may (albeit very rarely) cause problems.

A notable case when we cannot use height is when we want an element to stay inline. This is a case we would use display: inline-block. We use zoom: 1 only in an early debugging phase to encircle a rendering error.



Hack management

But the browsers they are changing, and we have to face the problem that depending on the bugs that are fixed in IE7 and up, inevitably hacks for IE6 might break in (or be detrimental to) new versions of the browser, or new browser versions with similar layout bugs might not deliver filters like * html anymore. In this light, the use of the MS proprietary zoom, can be advised.

  2. /* style for IE 6 + IE5.5 + IE5.0 */
  3. .gainlayout { height: 0; }
  7. .gainlayout { zoom: 1;}
  8. /* or whatever we might need tomorrow */
  9. </style><![endif]-->


A short note about IE Mac.


MSDN documentation

In the MSDN, there are very few pages related to the hasLayout property, and less is explained how having layout correlates with the visual formatting model of IE.


MSDN still speaks of “layout properties,” but the meaning has changed, they are not associated with elements having layout anymore. In IE5.5, the property hasLayout was introduced, more or less an internal flag.



Having layout basically means an element is rectangular.


(Editing Platform)



(HasLayout Overview)




The hasLayout property is a sort of flag: when it is set, the element has this special layout “quality”, which includes special capabilities on the floating, clearing, stacking, counting and so on for the element itself and for its non-layouted child elements.



A review of the consequences

Clearing floats and the extend to fit


The opposite behavior: In IE, some fixes do apply layout to a container, but what if this container now (undesirably) contains floats with this fix? They don't stick out of the container anymore, we have to move them via position: relative and margin: negative value just to get the design back.

The known behavior to expand a container to fit any wider content can be seen as an aspect of the “determined by its bounding rectangle” rule.


See section “Similarities with the CSS specs” for further information.

Elements next to floats

When a block follows a left floating element, the text content should flow right to the float and slide under the float. But if the block has layout, say, a width is set for some reasons, the layout element behaves like a rectangle, the text does not slide under the float. The width is incorrectly calculated starting at the right of the float, so width: 100% adds to the width of the float, resulting in a horizontal scroll bar. This is far off out of the specs.



By (re-)visiting this bug page

we'll see that the layout box following the float will not show the 3px text jog, because the float's hardwired 3px surrounding cannot affect the content inside the layout element anymore, but moves the whole layout element by 3px. Like a shield, layout prevented the content from been affected, but the energy of the push by the float moves the shielded box itself.




The most evident effects are:









Relatively positioned elements



Absolutely positioned elements:
Containing block, what containing block?




This design concept is questioned by IE, due to the concurring layout concept: the a.p. element is offset with respect to its nearest layout positioned ancestor, but the percentage dimension relates to the next layout ancestor. Note the slight difference, and as already mentioned, position: relative does not trigger hasLayout.




The MS-proprietary filter is applicable to layout elements only. Some extend the boundary of an object. They show their own specific flaws.

Re–flow of rendered elements



Background origin


Margin collapsing




In–page keyboard navigation: an odyssey



The stack, the layering, and layout



The contenteditable–debacle




Similarities with the CSS specs



Quirks mode

Some doctypes, or the inclusion of an <xml> declaration, trigger “quirks mode” or backwards compatible mode in IE 6. In that case, IE 6 acts like IE 5.5, and shares the same bugs, problems and behaviour as its elder brother.

Layout — a conclusion



Having layout — part of another engine?


(Dean Edwards)


The absurdity of bugs


(Molly ‚the cat‛)

This article was created on June 30, 2005 and last changed on October 27, 2005.

Holly Bergevin
Ingo Chao
Bruno Fassino
John Gallant
Georg Sørtun
Philippe Wittenbergh
Special thanks for supporting the project to:
Dean Edwards, and Molly ‚the cat‛
Discuss this article:
Contact us:
Copyright notice:
This work is published under a Creative Commons license.

Table of contents

  1. Introduction
  2. hasLayout — A Definition
  3. Nomenclature
  4. The Hand We've Been Dealt
  5. Where Layout Comes From
  6. Default layout elements
  7. Properties
  8. Notes on elements at inline level
  9. The hasLayout script property
  10. CSS hacks
  11. Hack management
  12. A short note about IE Mac.
  13. MSDN documentation
  14. Interpretation
  15. A review of the consequences
  16. Clearing floats and the extend to fit
  17. Elements next to floats
  18. Lists
  19. Tables
  20. Relatively positioned elements
  21. Absolutely positioned elements: Containing block, what containing block?
  22. Filter
  23. Re–flow of rendered elements
  24. Background origin
  25. Margin collapsing
  26. Block–level links
  27. In–page keyboard navigation: an odyssey
  28. The stack, the layering, and layout
  29. The contenteditable–debacle
  30. Similarities with the CSS specs
  31. Quirks mode
  32. Layout — a conclusion
  33. Having layout — part of another engine?
  34. The absurdity of bugs

Permanent location: http://www.satzansatz.de/cssd/onhavinglayout.html