WEB STANDARDS CREATIVITY

58
Furthermore, we apply min-width and max-width values to #wrap, ensuring that our design meets our client’s goal. The template’s
width will expand in size until it reaches 980 pixels, and it will shrink down as far as 770 pixels. Looking sharp, no?
Well, almost. There often is one blue “E”-shaped hiccup: versions 6 and below of Internet Explorer don’t support the maxwidth
and min-width properties. A number of workarounds are available to us for IE on Windows. For New York Magazine,
however, I settled on the following scrap of CSS:
#wrap {
width:expression(document.body.clientWidth > 980 ? "980px" : ➥
(document.body.clientWidth < 772 ? "770px": "auto" ));
}
expression() is a dynamic property, which is a proprietary Microsoft invention (http://msdn.microsoft.com/workshop/
author/dhtml/reference/methods/setexpression.asp) that works only in Internet Explorer on Windows. It muddies the
otherwise clear waters between style sheets and scripting—as you can see, I’ve written a small snippet of JavaScript directly
into the #wrap rule. When loaded by Internet Explorer, this JavaScript detects the width of the page (using
document.body.clientWidth, another IE-only bit of code) and constrains the width of #wrap div if the window gets larger
or smaller than our target widths.
At this point, the standardistas in the audience might be asking, “But Ethan, why would you resort to nonstandard code
in an otherwise standards-compliant template? And where do you live, so that I might throw pointed sticks at your
W3C-hating house?”
It’s at this point that our numerous CSS “patch” files come in handy. Since this is a fix for IE/Windows only, we can safely
place the nonvalid code in our patches-win.iex.css file. Tucked away into this separate file, our nonstandard code is hidden
from standards-compliant browsers and devices—and yes, that includes the beloved W3C CSS validator.
Negative margins and columns and stuff! Oh my!
With some markup and CSS foundations in place, it’s time to finish up our columns. Ryan Brill’s negative margins technique
(http://alistapart.com/articles/negativemargins) is implemented in three simple steps:
1. Set a width on the fixed-width sidebar (here, it’s content-secondary).
2. Float the content-primary-wrap container to the left, and set its width to 100%.
3. Set a negative margin-right on that container, the width of which should be equal to the width of the sidebar
from step 1.
The required CSS is as straightforward as it sounds. First, we need to float our two columns, like so:
#content-primary-wrap {
float: left;
width: 100%;
}
#content-primary {
padding: 0 12px 0 13px;
}
#content-secondary {
float: right;
}