PVII Equal Height CSS Columns
CSS is a very powerful tool that can serve to separate the structure of your web page from the way it looks. Whether you're deeply into CSS, or just getting up to speed, you probably have dabbled with some CSS-Positioned layouts. You might even have read some books or some online tutorials, such as our Quick Draw MacFly. The process of replacing a table-based layout with a CSS-Positioned one is not always straightforward. Emulating a table-based design, without tables, requires workarounds and hacks - and some of the fixes can be mighty complicated. There are entire web sites devoted to quantifying CSS positioning bugs in various browsers. It's an artform - or perhaps an obsession. This article covers one way of doing equal-height CSS columns, using our javascript solution. It is not intended to replace any other specific method, but rather to provide you with a stable and simple option you didn't have - up until now.
DIVs are not table cells
CSS-Positioned DIVs are not table cells and were never intended to behave like table cells. If you create a 2-column table, and color one column red, and the other blue, both columns will extend the full table height - regardless of the content in either column. If you have 1000 words in the right column and 10 words in the left column, the table will expand to the height of the taller column - and each column will be the same height.
Table columns are equal height by nature
View this Two-column table example to see how table cells naturally behave. Both columns in the example are the same height.
One DIV doesn't know what the other is doing
DIVs are separate boxes - one is totally independent from another. View this Two-column DIV example to see how DIVs naturally behave. The left column ends where its content ends. The left DIV has no idea that the right DIV is taller and probably couldn't care less.
To Hack or to Script, that is the question
If you want to lay out your page without tables and still have equal-height columns, then you can use CSS hacks or Javascript. In principle, hacking CSS to produce equal-height columns is not all that much better than nested tables or spacers. Ironically, many of the people who led the way with "creative" table design in the late 1990s are now among the leading proponents of CSS design. Hacking, it seems, might well be a chronic trait.
CSS allows us to separate structure from presentation. That is, it allows us to write logical markup consisting of headings, paragraphs, lists, and other tags - and then to have a completely separate style sheet act on that markup to position, size, and otherwise affect how each element is displayed. When what you want to happen is beyond the natural capabilities of html, xhtml, or CSS, you can try one or more hacks - or you can take a different (and perhaps more pragmatic) approach and use Javascript. While (x)html markup addresses a page's structure and CSS its presentation, Javascript addresses a page's behavior. Javascript allows you to separate a page's presentation from its behavior. And so long as viewing your page does not require javascript - but is merely enhanced by it - you can't lose.
See the script in action
View this Two-column Equal Height DIV example with column height controlled with javascript. The shorter column smoothly expands to match the height of the taller one.
What's the script doing?
Browsers keep track of objects in a page (the document) in terms of how those objects relate to each other and how they relate to the page itself. They do so in a very structured, hierarchical way. At the top of the hierarchy sits the document and there is a standard model that browsers use to report a document's objects: the Document Object Model - or DOM for short. The DOM is a web standard described by the W3C as:
"a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page."
Our script simply asks the browser to report the rendered height of two or more specified DIVs and then uses that information to set each specified DIV to the height of the tallest one - based on a particular tag in each of the columns.
Deploying the PVII Equal CSS Columns Script
To deploy our script, complete the following steps:
-Copy the script below
/*
------------------------------------------------
PVII Equal CSS Columns scripts -Version 2
Copyright (c) 2005 Project Seven Development
www.projectseven.com
Version: 2.1.0
------------------------------------------------
*/
function P7_colH2(){ //v2.1.0 by PVII-www.projectseven.com
var i,oh,h=0,tg,el,np,dA=document.p7eqc,an=document.p7eqa;if(dA&&dA.length){
for(i=1;i<dA.length;i+=2){dA[i+1].style.paddingBottom='';}for(i=1;i<dA.length;i+=2){
oh=dA[i].offsetHeight;h=(oh>h)?oh:h;}for(i=1;i<dA.length;i+=2){oh=dA[i].offsetHeight;
if(oh<h){np=h-oh;if(!an&&dA[0]==1){P7_eqA2(dA[i+1].id,0,np);}else{
dA[i+1].style.paddingBottom=np+"px";}}}document.p7eqa=1;
document.p7eqth=document.body.offsetHeight;
document.p7eqtw=document.body.offsetWidth;}
}
function P7_eqT2(){ //v2.1.0 by PVII-www.projectseven.com
if(document.p7eqth!=document.body.offsetHeight||document.p7eqtw!=document.body.offsetWidth){P7_colH2();}
}
function P7_equalCols2(){ //v2.1.0 by PVII-www.projectseven.com
var c,e,el;if(document.getElementById){document.p7eqc=new Array();
document.p7eqc[0]=arguments[0];for(i=1;i<arguments.length;i+=2){el=null;
c=document.getElementById(arguments[i]);if(c){e=c.getElementsByTagName(arguments[i+1]);
if(e){el=e[e.length-1];if(!el.id){el.id="p7eq"+i;}}}if(c&&el){
document.p7eqc[document.p7eqc.length]=c;document.p7eqc[document.p7eqc.length]=el}}
setInterval("P7_eqT2()",10);}
}
function P7_eqA2(el,p,pt){ //v2.1.0 by PVII-www.projectseven.com
var sp=10,inc=20,g=document.getElementById(el);np=(p>=pt)?pt:p;
g.style.paddingBottom=np+"px";if(np<pt){np+=inc;
setTimeout("P7_eqA2('"+el+"',"+np+","+pt+")",sp);}
}
Create a new JavaScript file in your web site folder and name it p7_eqCols2_10.js
- Place a link to the script file in the <head> region of any page on which you wish to use the script:
<script type="text/javascript" src="p7_eqCols2_10.js"></script>
Make sure you adjust the path to reflect the actual location of the script file relative to your document.
- Place an onLoad call on your page's <body> tag:
<body onLoad="P7_equalCols2(1,'c1','P','c2','P')">
The onLoad call contains the animation option (1=yes, 0=no) and then lists the target DIVs and the tags we wish to use in parentheses, separated by commas: 'c1','P','c2','P'. These are called the arguments. They are the IDs of the DIVs you want to set to equal height. In this example, you want a DIV with an ID of c1 and another DIV with an ID of c2 to be set to equal height, using paragraph 'P' tags as the object to meaure against.
Note: Usually you want to set the tag arguments to whatever is the last tag in a particular column - usually this is a paragraph, but it could also be an image or list depending on your page.
View and Download Example Layouts
We've put together several CSS layouts using PVII Equal Height CSS Columns and we've also prepared a download archive you can use to view them and analyze them locally.
Discuss it
If you are new to CSS or if you have questions or feedback, the PVII newsgroups are open 24/7 for discussion relating to this tutorial. Outlook Express users will likely be able to load up our server by clicking the link below, while others may need to configure our server in their news reading software.
PVII Newsgroups | server name: forums.projectseven.com