I like flexible, semi-liquid layouts. But Microsoft makes it tough because IE5+ does not conform to CSS standards.

I’ve managed to handle the problems so far by having two and three column layouts with a header but no footer. Then I decided that having a footer would be oh, so cool. And that’s where I ran into problems.

This doesn’t seem so tough, really. A header, then three columns, then a footer. The three columns together should be the same width as the header and footer. The footer should be at the bottom of the longest column, whichever that is. The presentation should be source ordered — that is, the first section in the source should be in the middle column. No tables — all CSS. Looks good in all modern browsers. OK…

This is not rocket science, if one wants a fixed-width layout. Something like 50% of web surfers use a resolution of 800×600, and something approaching 50% use a resolution greater than that. Only a very tiny percentage use anything smaller. I like 1024×768, myself. But if I design a fixed-width page for 1024×768, then people using 800×600 can’t see the whole page without scrolling horizontally. On the other hand, if I design for 800×600, then anyone using higher than that ends up with a bunch of white space. That isn’t all that bad with a two-column layout, but with three columns it makes the middle column mighty narrow.

Lizard, Mirage and Moon are examples of fixed-width layouts. They look best at 1024×768. Below that, the horizontal scroll bar is necessary to see the right-hand column. Above that, there’s white space to either side.

Black and White and Mommymonster dot com are completely liquid. B&W does better at liquidity than MM. Below 1024×768, some parts of MM – notably the calendar and the drop-down box – break because the side columns become too narrow for their contents.

The most common solution to this last problem is to have the side columns fixed-width and the middle column liquid.

No problem, right? Well… I want my layout to become smaller than the header and footer if the resolution is narrower than the header width. But, if the user has a resolution larger than the header, I want the columns to stay under the header and above the footer, and have white space added to the sides. Again no problem. I simply use the max-width property on the main wrapper div that encloses all of the columns and the min-width property on the side columns, while having the middle column width property a percentage.

That works great. In every browser except IE5+. Along with various other quirks and bugs, IE does not support max- or min-width, or max- or min-height.

There are various ways to “fix” this. After trying several of them out, and after much thought, I decided to go with a hack that uses IE’s ability to parse a javascript expression imbedded in a CSS property, like so:

#maindiv {
width: expression(document.body.clientWidth > 1000? “1000px”: “100%” );
}

What this says is that, if the width of the browser window is greater than 1000px, set the width of maindiv (that’s the wrapper) to 1000px. Otherwise, set it to 100% of the browser window.

The problem with this hack is that it means that the CSS no longer validates. I believe in writing valid code, so this bothers me. But I’m consoling myself with the fact that at least it is a browser-specific hack to fix a browser-specific problem. Hopefully with the next release of IE, Microsoft will get around to fixing their box model problems and support all of CSS2.