CSS Layout
Today I fell over the cliff. I did the brave, the unthinkable, the foolish. I finally ditched the single layout table that used to hold this weblog rigidly in place, and went for (gasp!) all CSS in my layout. And, amazingly enough, I was able to do it without changing the look of the site one bit. Wasn’t sure if I could pull it off.
It works with a combination of absolute positioning and margins. The green strip you see to the left is actually the <body> of the page. This middle section, with the posts, is a beige-colored <div>. Normally it would fill up the page, hiding the background color. But I’ve given it a margin-left of 150px, which exposes that much of the <body> background, creating the green bar. This allows the green bar to extend the length of the page, which wouldn’t happen if it was just a float or something. Then all the text in the green bar is in a <div>, which is absolutely positioned just below the header (which itself is an <h1> with a background image). The blogroll is floated right.
The layout’s been tested in IE5.5, IE6, Mozilla and Opera 7, all on Windows. They all show me the same thing. I’ve hidden the style sheet from Netscape 4.x, using @import, so in that browser it looks predictably plain. And that’s the extent of my testing. I’m hoping that I didn’t overlook anything that would make it fall apart in other browsers, like Macs or older IE. But, I’m sure I’ll hear about it if I did!
More tweaks to come, I’m sure.
Filed under The Computer Vet Weblog
Mark me down for Mozilla 1.4 (Stable). It looks great!
I'll give it a go on Pocket IE when I get to work tomorrow. Somehow I'll bet that the 240×269 resolution will kill it off…
I'd like a screenshot of that! But supposedly Pocket IE doesn't even try to interpret the CSS, so it should look like Netscape 4. Hopefully.
Okay, they do work in Pocket IE… It reloaded the page last time.