In Easy Multi-Column Designs Using CSS 2.1 Display Properties, Project VII provides us with a free tutorial on using CSS display properties (specifically display: table properties) to create multi-column layouts.
CSS table display allows us to create a perfectly stable multi-column design, with a flexible middle column and fixed-width sidebars, while avoiding the pitfalls and hacks you would encounter using CSS floats. You won’t have to worry about issues such as negative margins, box-model calculations, extra structural elements, equal height columns, float drop, or float clearing.
The tutorial is excellent and I recommend it for your edification. Like all PVII material, it is designed for use in Dreamweaver. However, anyone can follow along with the exercise and do it in a text editor just as easily. Dreamweaver is not required. The IE workarounds are explained extensively.
Related Web Teacher post: Adapting Dreamweaver CSS layouts to display:table rules where PVII’s Al Sparber commented on my post a couple of weeks ago. I’m happy he started thinking along the lines of a better way to use the display property, because now we have his excellent tutorial.
Stumble it!
What can you contribute?