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

• First up is the discov­ery and subsequent document­a­tion of Internet Explorer’s mystical “hasLayout” property. Basically, if your CSS can trigger hasLayout on an HTML element, it magic­ally solves lots of problems with IE’s page rendering.
• Second is an obscure piece of the CSS specific­a­tion, which basic­ally 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 funda­mental problems with using CSS for page layout: Floated content escap­ing from it’s parent element, and compat­ib­il­ity with Internet Explorer.

• To stop floated content from escap­ing 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 trigger­ing hasLay­out).

Simple huh?

But what about the real world?

OK, let’s take the current incarn­a­tion of this very website. On each of the major struc­tural elements on the page, I’ve set (for example) width: 25em; and overflow: hidden;. The former triggers hasLay­out, and the latter encloses any floated content. Ah bisto! The site works in Internet Explorer with virtu­ally no fiddling. Superb.

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