So this is how I’ve been working recently

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.

4 Responses to “So this is how I’ve been working recently”

1. comment_author_url)) { ?> Owen Owen

Well done.

2. comment_author_url)) { ?> matt matt

DUDE!
I was flopping all over the internet yesterday and sunday.. no .. wait, what day is it?

/counts fingers

Yesterday and Monday to try to remember the very same thing!

I’m having a nightmare rememberering all the hacks/tricks at the moment, and learning Ajax.Dom etc, oh and working +40 hours a week.

need more hours in the day.

3. comment_author_url)) { ?> Me Me

Cute.

Would be nice(r) if your design were fluid (I get an horizontal scrollbar, ugh).

;o)

4. comment_author_url)) { ?> Olly Olly

I’m not a big fan of fluid stuff at the moment – I might chuck in the odd max-width here or there though.