July 17, 2003

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

Comments (4)

Comments RSS - Write Comment

  1. Eric says:

    Mark me down for Mozilla 1.4 (Stable). It looks great!

    Posted July 17, 2003 @ 10:44 pm
  2. Kalrac says:

    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…

    Posted July 17, 2003 @ 11:36 pm
  3. Scott Schrantz says:

    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.

    Posted July 18, 2003 @ 1:12 am
  4. Kalrac says:

    Okay, they do work in Pocket IE… It reloaded the page last time.

    Posted July 18, 2003 @ 2:37 pm

Write Comment