Category: WebTeacherTips

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 {
display:table-cell;
width:400px;
height:100px;
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.

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 {
display:table-row;
background: #DDDDDD;
padding: 0 10px;
}
#contentwrap {
display:table;
}
#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;
background:#DDDDDD;
}

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.

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