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.
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]
I’ve been using this technique with container
divsand like the results overall. However, I was drawn to the simplicity of your css without thedivs. 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.
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.
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.