Easy Multi-Column Designs
Using CSS 2.1 Display Properties

If you've tested your page in IE7 (or under) you'll notice that your columns display linearly down the page. These older versions of IE do not support CSS table display properties so we'll need to work around that issue. You can stop here and your page will display fine in modern browsers, while gracefully degrading to a linear display in old browsers. If you really want to support older versions of IE, then proceed with the following workarounds. Otherwise, skip to: Part 3: Making it Petty

Part 2: IE Workarounds

We'll use Microsoft conditional comments to feed special markup to only the versions that need it. Our conditional comments will look like this:

Conditional comments are ordinary HTML comments that contain proprietary Microsoft instructions inside the opening and closing comment markers. The opening marker contains the version vector—in this case [if lte IE 7], which tells Internet Explorer to execute the content of the conditional comment if the version is less than or equal to IE 7. The instruction in the closing marker, [endif], terminates the conditional comment.

Serving Old versions of Explorer their Medicine

To fix older versions of IE, we're going to use conditional comments to serve up a simple structural table. The table will be seen only by the versions that need to see it.

The markup that comprises our layout is:

<div id="masthead">
<h1>Masthead</h1>
</div>
<div id="wrapper">
<div id="firefox-bug-fix">
<div class="columns" id="c1">
<h3>column 1</h3>
<p>Lorem ipsum dolor</p>
</div>
<div class="columns" id="c2">
<h2 class="topper">Center Column</h2>
<p>Lorem ipsum dolor</p>
</div>
<div class="columns" id="c3">
<h3 class="topper">column 3</h3>
<p>Lorem ipsum dolor</p>
</div>
</div>
</div>
<div class="footer">
<p>Footer</p>
</div>

A simple, 3-column structural table is marked up like this:

<table>
<tr>
<td>Column 1</td>
<td>Center Column</td>
<td>Column 3</td>
</tr>
</table>

We're going to place the table markup that comes before each column inside conditional comments in the appropriate place.

Conditional Comment 1 for Column 1

The conditional comment that comes before the column 1 DIV will contain the opening table, table row and table cell tags: <table><tr><td>.

Locate the DIV tag for column 1:

Make a new line just above it and insert this code:

Dreamweaver will render in gray because it's a comment. The summary attribute is for accessibility and the ID and class name will be used to style the columns.

Locate the DIV tag for column 2:

Make a new line just above it and insert this code:

Locate the DIV tag for column 3:

Make a new line just above it and insert this code:

Locate the Closing DIV tag for column 3:

</div>
<div class="footer">

Make a new line just below the ending </div> tag, but before the footer DIV, and insert this code:

Your new markup now looks like this:

<div id="masthead">
<h1>Masthead</h1>
</div>
<div id="wrapper">
<div id="firefox-bug-fix">

<div class="columns" id="c1">
<h3>column 1</h3>
<p>Lorem ipsum dolor</p>
</div>

<div class="columns" id="c2">
<h2 class="topper">Center Column</h2>
<p>Lorem ipsum dolor</p>
</div>

<div class="columns" id="c3">
<h3 class="topper">column 3</h3>
<p>Lorem ipsum dolor</p>
</div>

</div>
</div>
<div class="footer">
<p>Footer</p>
</div>

CSS for older versions of MSIE

We need to make a small edit to our style sheet. We'll append the selector names for our column style rules to include the class name we assigned to each of the column <td> elements in our conditional comments. This will ensure that the table cells that older versions of IE render will have the same background, color, width, and padding that modern browsers do.

Locate the following rules:

#c1 {
background-color: #326698;
color: #FFF;
width: 180px;
min-width: 180px;
padding: 20px;
}
#c2 {
width: auto;
padding: 20px;
}
#c3 {
background-color: #D7D7D7;
width: 180px;
min-width: 180px;
padding: 20px;
}

Change the selector names to target the respective <td> element by using the class names we assigned to each of the <td> elements in our MSIE conditional comments:

#c1, .c1 {
background-color: #326698;
color: #FFF;
width: 180px;
min-width: 180px;
padding: 20px;
}
#c2, .c2 {
width: auto;
padding: 20px;
}
#c3, .c3 {
background-color: #D7D7D7;
width: 180px;
min-width: 180px;
padding: 20px;
}

Our final workaround involves creating a special style sheet for older versions of IE, wrapping it inside conditional comments, and placing it just above the closing </head> tag so that it comes after the main style sheet link. These rules will contain exceptions or special properties that need to be seen by older versions of IE only.

Locate your page's closing </head> tag, make a new line just above it and insert this code:

The first rule, #c1, #c2, #c3, is a multiple selector (selects all 3 column DIVS) and turns off background-color, padding, and border. We need to do this because for older versions of IE will not draw the <div> elements full height, so we need to style the <td> elements, which will be full height.

The second rule, #msie td, selects the msie table and sets all <td> elements inside it to vertical-align top with a 1px black border. We also set font-size to 1em to prevent IE7 and under from calculating the font-size of the <td> element as a proportion of the <div> elements.

The third rule, #msie, selects the msie table, collapses its borders and turns border-spacing off.

The fourth rule, .c2, ensures that the center column displays full width even if there is less than 1 full line of content inside.

And there you have it. Your page will now display correctly in older versions of IE.

Part 3: Making it Pretty

Easy Multi-Column Designs Using CSS 2.1 Display Properties

Part 2: IE Workarounds

Serving Old versions of Explorer their Medicine

Conditional Comment 1 for Column 1

Your new markup now looks like this:

CSS for older versions of MSIE

Easy Multi-Column Designs
Using CSS 2.1 Display Properties