Tiffany B. Brown

A web log about web development and internet culture with frequent detours into other stuff.
Free sh*t for the broke a** designer in you
Thriller, South Asian Style

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:

Download it [ZIP file]

Share this entry:
  • Digg
  • Technorati
  • del.icio.us
  • Ma.gnolia
  • Mixx
  • NewsVine
  • Reddit
  • StumbleUpon
  • TailRank
  • Furl
  • Slashdot
  • Global Grind
  • YahooMyWeb
  • Facebook
  • Google
  • Live

3 comments

  1. 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.

  2. 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.

  3. 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.

previous post: Free sh*t for the broke a** designer in you
next post: Thriller, South Asian Style