Adapting Dreamweaver CSS layouts to display:table rules

With the upcoming release of IE8, which will support CSS display:table and other table related display properties, I’m expecting changes in the way web pages are laid out. I just finished an intensive experience with Adobe Dreamweaver CS4 and the built-in CSS layouts that come prepackaged with the product. Naturally, my mind veered in the direction of those layouts. Okay, the truth. Actually, I’ve been having visions of Stephanie Sullivan (who created the Dreamweaver CS4 built-in CSS layouts) madly adapting all those page layouts to add display:table layout options.

Well, I couldn’t wait for the next release of Dreamweaver to see what Steph might do (or might not do—this is only my fantasy—no idea if Steph is participating) to add to the layouts she’s already made for Adobe. I had to play around with it myself.

I started off easy. I picked a layout with two columns, no header and footer, and a fixed width. In the Dreamweaver File > New menu, this layout is called 2 column fixed, left sidebar. I got just a bit fancy by adding a div in the main content area that held two boxes or cells that use display:table-cell in the CSS. There are colors and widths and other CSS rules from the Dreamweaver layout that I didn’t touch. I only removed the rules for layout and added new ones. Here’s the CSS for the layout:

#sidebar1 {
display: table-cell;
width: 200px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
#mainContent {
display: table-cell;
padding-left: 8px;
.cell {
border:1px solid red;

Here’s how it looks. If you click the image, you’ll see the actual HTML page, which contains the CSS and comments that explain what I changed and did. Don’t expect the layout to look right with IE unless you have version 8. Use Firefox or Opera or Safari. Of course, you can view the source with IE6/7 to see the HTML and CSS.

layout using display:table properties

The changes were super easy. Took no more than 5 or 10 minutes to do.

I tried something harder. This time I used the Dreamweaver File > New layout for CSS called thrColLiqHrd, which means a three column liquid layout with a header and a footer. You are probably aware that this type of layout is normally done with floats (which must be cleared). Sometimes this type layout also needs faux columns to get equal heights on the three columns.

In the HTML, I changed the source order for the three columns to sidebar1, mainContent, sidebar2. I added a wrapper called contentwrap around the three columns. This enabled me to display the three columns using display:table-row. Similarly, the header and footer were designated as display:table-row. The last change was to set each column to display: table-cell. As with the first adaptation, I left colors and widths and other rules from the built-in Dreamweaver layout the same. I only changed rules affecting the layout. Here’s the CSS for the layout.

#container {
display: table;
width: 80%;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
#header {
background: #DDDDDD;
padding: 0 10px;
#contentwrap {
#sidebar1 {
display: table-cell;
width: 22%;
background: #EBEBEB;
padding: 15px 0;
#sidebar2 {
display: table-cell;
width: 23%;
background: #EBEBEB;
padding: 15px 0;
#mainContent {
display: table-cell;
#footer {
display: table-row;
padding: 0 10px;

And here’s the result. If you click the image, you’ll see the actual HTML page, which contains the CSS and comments that explain what I changed and did.

three column layout with display:table rules

This layout took longer to adapt, maybe 20 to 30 minutes. Plus, I made a few return trips to the book Everything You Know About CSS is Wrong! to make sure I knew what I was doing.

Even when IE8 releases, using layouts like these without conditional comments linking to IE7 CSS rules won’t truly be practical until all the older installations of IE have disappeared. For a while it will be like the bad old days when everyone used @import to create a stylesheet just for Netscape. Except, now we’ll use conditional comments to accomodate older versions of IE. We’re still dealing with the pain of creating extra stylesheets for browsers that don’t perform up to standards. Same old, same old. Sigh.

Yet. Yet. People will start playing with this more fully when IE8 releases. Here’s my advice to Dreamweaver users who are eager to start experimenting with layouts using display:table properties. You don’t need to wait for the next release from Adobe to create some pages using CSS table layouts. Try adapting the layouts you have. It works.

Related posts: CSS Tables, Review: Everything You Know About CSS is Wrong!, Mastering CSS with Dreamweaver CS3

Useful Links: Teaching Tips, Opera Curriculum, Blog Action Day, WordPress tutorial, 1996 Burger

Teaching Tips is a resource site with a blog. Explore both the main site resources and the blog articles.

Opera’s Web Standards Curriculum added 18 new articles.

Only a couple of weeks remain before Blog Action Day. I’m planning a post. I hope a whole lot of other bloggers are, too.

Upgrade WordPress Using cPanel and Fantastico won’t help me upgrade, but maybe some of the rest of you can use this great tutorial to make keeping up with WordPress updates a little easier.

1996 McDonald’s Hamburger Okay. So this has nothing to do with the web. But how many of these things have you eaten since 1996? That’s just scary. I feel like apologizing to my stomach.

Useful Links

Dealing with Speculative Work at WebWorkerDaily has some good advice for the designer who’s asked to submit work on spec. This might make a good discussion springboard with students who will be eager to land clients as they head out on their own. And it might keep one of them from getting burned. I wrote something several years ago, taking the perspective of the person looking to hire a designer. You might find that useful to discuss with students, also. What to Know Before You Hire a Web Designer is the article, on my personal site.

Want to Play? is my latest BlogHer post. It’s about girl gamers and the community waiting for girls who play video games.

Years ago, when our family “game machine” was a clunky little gadget from Radio Shack and the best games were of the Pac Man generation, I watched my son become addicted to games. He still is, and he’s passed the torch to the next generation, his 12 year-old daughter.

One of the points I touch on in the BlogHer article is the skills that learners develop playing video games.

Related post: 21st Century Learner

Opera Web Standards Curriculum

Opera announced their Web Standards Curriculum is now available. This is a big deal to many of us working on web standards and education. Here’s their intro:

Learning Web Standards just got easier. Opera’s new Web Standards Curriculum is a complete course to teach you standards-based web development, including HTML, CSS, design principles and background theory, and JavaScript basics. It already has support from many organizations (including Yahoo! and the Web Standards Project) and universities.

The introduction and table of contents, written by Chris Mills, explains what is there now and what is still in development, who will find the curriculum useful, and how to use it.

Chris Mills is also a member of the WaSP Education Task Force that is also developing a web standards curriculum.

Summary of eHow Articles for April

On Naxos

Last year at this time I was getting ready to go to Greece. My favorite part of the trip was the stay on the island Naxos, where this rock formation tantalizes a few yards away from the shore near Naxos Town.

Here’s how I spent April this year, at least the eHow writing for April.

A roundup of useful links

Jim Thatcher has revised and updated his tutorial on how to comply with Section 508. It’s a ten section course in accessibility.

Project Seven has a free tutorial on Q Tabs, or navigation tabs with scalable graphics. The tutorial includes downloadable files and graphics. PVII Q Tabs

The New York Times (NYT) has embraced the blogosphere with its Blogrunner section. The NYT cherry picks from blogs it considers accurate or authoritative and displays them collected by topic. One such topic is technology. NYT Blogrunner: Technology A personal favorite post from the Technology blogs is New Classroom War: Teachers vs. Technology.

An article by Milissa Tarquini at Boxes and Arrows takes on the myth of above the fold design and thoroughly blasts it into oblivion. Blasting the Myth of the Fold

A new and discounted deal on Mac software each day. You save money and you learn about the newest Mac apps. MacZOT