Tiffany B. Brown

a mish-mosh of stuff

A semantic, 3-column CSS and HTML layout

UPDATE: I forgot to mention that this was a 20-minute-see-if-it-works type of deal for the sake of experimenting. It’s completely untested in any Windows browser, and only sort of tested in Firefox for Mac, Opera 9 for Mac and Safari.

What the layout looks like.
That’s a screen shot. It’s ugly on purpose ;-) . Tweak it, trick it out, bend it to your own purposes.

About the layout:

  • It has a header, horizontal navigation bar, and footer.
  • There are no container divs; instead styles are applied to the <html> and <body> tags.
  • It uses a background image for faux equal-height columns.
  • It is licensed to the public domain.

Download it [ZIP file]

  • http://www.thebrotherlove.com/ j. brotherlove

    I’ve been using this technique with container divs and like the results overall. However, I was drawn to the simplicity of your css without the divs. Sweet!

    Unfortunately, IE6 fails with max-width, min-width, etc. Semantics aside, that is a big obstacle for me. Have you tested this with IE7?

    You may want to check this post by svendtofte for a workaround if you haven’t read it already.

  • http://www.thebrotherlove.com/ j. brotherlove

    I’ve been using this technique with container divs and like the results overall. However, I was drawn to the simplicity of your css without the divs. Sweet!

    Unfortunately, IE6 fails with max-width, min-width, etc. Semantics aside, that is a big obstacle for me. Have you tested this with IE7?

    You may want to check this post by svendtofte for a workaround if you haven’t read it already.

  • http://www.tiffanybbrown.com/ tiffany

    You know … I did this so fast that I didn’t even think about hacking it for IE or tweaking it for all conditions. I guess I should mention that this is thoroughly untested on any Windows browser (although I just uploaded a version that might work with IE), and only half-tested on a Mac.

    Usually with IE, I just set an explicit width, and let IE users get what they get. My only concern with svendtofte’s solution is that the CSS won’t validate.

  • http://www.tiffanybbrown.com/ tiffany

    You know … I did this so fast that I didn’t even think about hacking it for IE or tweaking it for all conditions. I guess I should mention that this is thoroughly untested on any Windows browser (although I just uploaded a version that might work with IE), and only half-tested on a Mac.

    Usually with IE, I just set an explicit width, and let IE users get what they get. My only concern with svendtofte’s solution is that the CSS won’t validate.

  • http://benramsey.com/ Ben Ramsey

    Seems to work fine in both Firefox and Safari on a Mac, though it gets ugly if you start resizing your window down, and I had to resize my initial Safari window size so that it was a bit wider. When resizing down, column3 pops underneath column2 and the fixed background gets out of alignment with the layers.

    Overall, though, it’s very nice.

  • http://benramsey.com Ben Ramsey

    Seems to work fine in both Firefox and Safari on a Mac, though it gets ugly if you start resizing your window down, and I had to resize my initial Safari window size so that it was a bit wider. When resizing down, column3 pops underneath column2 and the fixed background gets out of alignment with the layers.

    Overall, though, it’s very nice.