I couldn't wait any longer, so I started fleshing out the HTML prototype for the homepage last week, and all I can say is that it was not easy.
This took me much longer than I anticipated. Mostly due to many failed experiments with layout.
My first idea was to experiment with the Negative Margin layout ideas I had read about in ALA. This really appealed to me because I wanted to keep both content areas fixed to an em length, while having the whitespace around each fluid. I though could try letting both columns float around a bit according to the browser window's width. Alas, it was not to be. I tried to troubleshoot, but gave up after an hour because I just wasn't in the mood to find out why IE hates percentages in combination with em width or margins, or something. So it was time for plan B.
I was sticking to the plan of having em fixed width columns, but this time with a simple two-column float layout. I almost go this one to work, but again I ran into trouble with IE, mostly around getting the column background to flow to the bottom of the page. Time for plan C.
Third time is a charm. I punted, using Dan Cederholm's trick for getting the column backgrounds to flow to the bottom of the page, but to do this I had to settle on a fixed width layout. So I set the width to 700px (don't ask me why I picked that particular width, it just seemed to work out that way) and was off to the races. A little work here, a little trickery there and viola, I had pretty damned close to my homepage comp!
Even though I had to ditch em's for my container widths (kind of sad about that, but hey maybe in rev.2), I was still able to maintain the text in em's for easier text-sizing in IE, and also use em's for setting white space whenever it was adjacent to or dictated relative to the size of the text (margin's between list elements, paragraphs, etc.). I only used pixels to define margins or padding related to the fixed width containers. In doing so, I managed to build a stylesheet without any hacks. Yay!
I can't say that I will be able to stay hack-less (though I will try to do so, if only for the challenge of it), because I have a whole lot more website to build. First I plan to finish out the weblog styling (all the archive levels) and translate them into MT Templates, then I need to finish up my comps for the rest of the site!. And at some point I need to write an entry so I'm not neglecting my blog.
Back to the grindstone
Posted by Sean at June 27, 2004 10:23 PM
Comments
Post a comment