Making CSS layouts work in Internet Explorer for Windows has for me, until recently, been something of a struggle. I know CSS virtually inside out, and still the dreaded IE factor would always get in the way. Some fairly recent developments have changed all that for me though.

• First up is the discovery and subsequent documentation of Internet Explorer’s mystical “hasLayout” property. Basically, if your CSS can trigger hasLayout on an HTML element, it magically solves lots of problems with IE’s page rendering.
• Second is an obscure piece of the CSS specification, which basically says any element with overflow set to something other than visible should expand to contain any floated elements within it. This only works for Internet Explorer if you can trigger the mystical haslayout on the element in question (AVK has more).

Blah blah blah, obscure something-or-other, whatever…

You’re right, it’s pretty dull stuff, but put the two things together and they add up to something big. This very simple approach has solved two of the biggest fundamental problems with using CSS for page layout: Floated content escaping from it’s parent element, and compatibility with Internet Explorer.

• To stop floated content from escaping from it’s parent element, set that parent element’s overflow to hidden (or something else other than “visible”).
• To make the layout work correctly in Internet Explorer for Windows, give that same element a width or height (or use another way of triggering hasLayout).

Simple huh?

But what about the real world?

OK, let’s take the current incarnation of this very website. On each of the major structural elements on the page, I’ve set (for example) width: 25em; and overflow: hidden;. The former triggers hasLayout, and the latter encloses any floated content. Ah bisto! The site works in Internet Explorer with virtually no fiddling. Superb.

So take two things away from this: Non-visible overflow and dimensions. They are your saviours.