Monday, September 19th 2005

Playing Around With CSS – A Scalable Three-Column Layout

After having read the first few chapters of Lie and Bos’s book Cascading Style Sheets (3rd ed.) I was inspired to play around a bit with some of the nice things available in CSS.

Unfortunately many of these nice CSS features (such as the sibling or adjacent selectorme wants it very much!) don’t work at all in Internet Explorer 6.

Anyway, I put together a three-column layout based entirely on CSS, which a) is completely based on the users default font size and b) makes use of the full screen width. Actually, to my surprise, the basic layout seems to work quite OK even in rusty old IE6. Here’s what I’ve put together so far. Feel free to use all or parts of it if you should want to.

Can’t wait ’til the standards compliant browsers have a more substantial market share, so we can start using adjacent/sibling selectors seriously. They are truly wonderful for making good-looking typography.

Comments on this design, or other advanced CSS stuff, are more than welcome.

Oh. And one other thing I’m looking forward to play with is CSS3 colours, which will be allowed to be semi-transparent: colours with an opacity value. Sounds pretty neat, eh? Can only imagine it will be totally so.

Update 2005-09-26: As you may have noticed, I decided to use the three-column layout I was playing with here as the base for my new blog design…

Comments are closed.