Building a multiple-column layout

View Comments
3-columns

In CSS, building layouts with columns can be quite difficult, especially if the columns all have to be an equal height. This is a common necessity in website layouts for items such as a vertical side navigation or a blogroll. I’ve come across an interesting solution to multiple-column layouts that works in all modern browsers. The catch is that it fails in IE6 and IE7, but I can show you a few ways around that. We’re always hacking IE6 and IE7 anyway, right?

Creating any amount of columns

The web development community has tried over and over to make a CSS solution for multiple columns sharing the same, dynamic height. With every solution comes exceptions and scenarios that do not fit, or browsers that need hacks in order to utilize it. The solution proposed here requires no hacks, but only because we aren’t trying to make it work in old browsers. There are ways to make this work in IE6 and IE7 with conditional CSS stylesheets with rules to accomplish this effect. But the newer browsers deserve cleaner CSS and smaller CSS files.

The solution lies in tables. Using tables to organize a layout into a grid is bad, not because it works but because it is semantically incorrect. Tables represent tabular data and not a gridded layout. However, we do know that tables can accomplish the organization that we want. So, we utilize the visual properties of the table without the mark-up of the table.

  • We can make an element behave like a table (<table>) using the display: table CSS rule.
  • We can make an element behave like a table row (<tr>) using the display: table-row CSS rule.
  • And, we can make an element behave like a table cell (<td>) using the display: table-cell CSS rule.

HTML and CSS required to make multiple columns

The mark-up is simple. In the latest versions of all major browsers, creating a element to represent the table row is not necessary, but older versions of Firefox, particularly versions of Firefox prior to Firefox 4 Beta, requires an element to represent the table row in order to display properly. So, for backwards-compatibility, include the table row element. If you are not concerned, then you can reduce this HTML by removing it. You can view the example here.

HTML for a 3-column layout:

Note that you will need to specify a DOCTYPE, especially for IE (which we will account for in the next section).

<div id="header">Header</div>
<div id="main">
	<div id="wrapper">
		<div id="left">Left</div>
		<div id="content">
			<p>This is just some regular ol' content.</p>
			<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		</div>
		<div id="right">Right</div>
	</div>
</div>
<div id="footer">Footer</div>

Skeleton CSS for a 3-column layout:

Note that the width used here is arbitrary.

html, 
body {
	margin: 0px;
	padding: 0px;
}

#header, 
#footer {
	display: block;
}

#main {
	display: table;
}

#wrapper {
	display: table-row;
}

#left, 
#content, 
#right {
	display: table-cell;
}

#left {
	width: 200px;
}

#right {
	width: 200px;
}

CSS for the 3-column layout example:

html, 
body {
	margin: 0px;
	padding: 0px;
}

#header, 
#footer {
	display: block;
	margin: 0px auto;
	width: 960px;
	height: 4em;
	line-height: 4em;
	text-align: center;
	background-color: #999;
}

#main {
	display: table;
	margin: 0px auto;
	width: 960px;
}

#wrapper {
	display: table-row;
}

#left, 
#content, 
#right {
	display: table-cell;
	padding: 8px;
}

#left {
	width: 200px;
	background-color: #fdd;
}

#right {
	width: 200px;
	background-color: #dfd;
}

#content {
	background-color: #fff;
}

Getting the 3-column layout to work in IE6 and IE7

Internet Explorer versions prior to 8 do not understand the display: table-cell CSS rules. This means that creating an arbitrary amount of columns in IE6 and IE7 is no easy task. However, if what you are after is a 3-column layout, I’ve got your back. Use conditional comments to apply to following CSS to versions of IE that are older than IE8:

CSS to modify the above CSS for old versions of IE:

#main, 
#wrapper, 
#left, 
#content, 
#right {
	display: block;
}

#main {
	display: block;
	background-color: #fdd;
}

#wrapper {
	position: relative;
	height: 100%;
	margin-left: 216px;
	background-color: #dfd;
}

#content {
	float: left;
	width: 512px;
	background-color: #fff;
}

#left {
	position: relative;
	display: inline;
	float: left;
	margin-left: -216px;
	background-color: transparent;
}

#right {
	float: left;
	background-color: transparent;
}

Make sure that you remember to apply these rules after the rules that we applied earlier. Also, if you missed the link to the live example, you can access the example of a 3-column layout that works in modern browsers and IE here.

Did you like this? Share it:
blog comments powered by Disqus