the two-column layout background problem
12.29.2003
Coming back from a fun fest of family and food, at which I once again confirmed that most of my cousins are skinnier and more stylish than I (but I'm OK with that, really), I would really like to come up with a good fix for the column background problem on this blog. What background problem, you ask? “It looks fine to me,” is what you should be saying if you're viewing this page in IE6/Win, IE5+/Mac, Safari, or any of the Mozilla browsers. Well, it does, but that's because the main content column is longer than the sidebar. On my contact confirmation page, the content column was shorter than the sidebar and the cream-colored background only extended down as far as the content, leaving a sizable gold gap above the green border. Like so:
CSS Creator uses a kind of hackish way to get around this problem: giving an outer div a side border the size and color of one of the columns, then shifting the column over on top of the border using negative margins. (See the CSS Creator example.) Call me picky, but I'm not really satisfied with this solution. What if I want to use background images on my columns? In fact, I am using a background image to create the shadow effect that you see. The CSS Creator solution does not solve my problem.
It occurs to me that since my layout is of fixed width, I could use a background image on my “wrapper” div (the one with the green border around it). I'll probably do that for now. I was thinking about making this a liquid layout, just to try it out, but I suppose that will have to be put on hold for now.
