Picked this up from the sitepoint.com techtimes newsletter this morning. It's a good workaround.
" Quick Tip
Equalizing Column Heights
As I discussed in this issue's Editorial, creating columns of equal height is beyond the abilities of current CSS layout standards. Fortunately, a little JavaScript comes to the rescue in this Quick Tip.
So following the examples in the Editorial, we'll assume you have a page with three columns. The center column uses natural (i.e. static) positioning and includes margins that leave room for the left and right columns, which use absolute positioning. The id attributes of the column <div> tags are left, content, and right.
Instead of dealing with the differences between browsers, we'll leave it to the professionals and use the excellent X script from Cross-Browser.com. Simply download x.js from that site and load it in the <head> tag of your page as follows:
<script src="x.js" type="text/javascript">
</script>
Now, because the footer may well be covered by the left and right columns when the browser lays them out, we'll want to keep the footer invisible until we've adjusted the column heights. Make sure the footer <div> has id="footer" set and add this style rule to the <head> tag of your document:
<style type="text/css">
#footer {
visibility: hidden;
}
</style>
Now, when the browser has finished loading the page (and whenever the browser window is resized), we want to find out which of the columns is the tallest and resize them all to that height. Then we can display the footer.
Because this process may happen repeatedly as the user resizes the browser window, we need to wrap the content of each column in an additional <div>. The structure of the document becomes:
<div id="left">
<div
id="leftcontent"><!--left--></div>
</div>
<div id="content">
<div
id="contentcontent"><!--content--></div>
</div>
<div id="right">
<div
id="rightcontent"><!--right--></div>
</div>
It is these "inner" <div> we will check for the natural height of each column before setting the height of the "outer" <div>.
Here's the JavaScript function that adjusts the layout using the X library's xHeight and xShow functions:
<script type="text/javascript">
function adjustLayout()
{
// Get natural heights
var cHeight = xHeight("contentcontent"
;
var lHeight = xHeight("leftcontent"
var rHeight = xHeight("rightcontent"
// Find the maximum height
var maxHeight =
Math.max(cHeight, Math.max(lHeight, rHeight));
// Assign maximum height to all columns
xHeight("content", maxHeight);
xHeight("left", maxHeight);
xHeight("right", maxHeight);
// Show the footer
xShow("footer"
}
All that's left is to make this function run when the page is loaded or resized. This is done with xAddEventListener:
window.onload = function()
{
xAddEventListener(window, "resize",
adjustLayout, false);
adjustLayout();
}
</script>"
Can find some good info there.
Max
" Quick Tip
Equalizing Column Heights
As I discussed in this issue's Editorial, creating columns of equal height is beyond the abilities of current CSS layout standards. Fortunately, a little JavaScript comes to the rescue in this Quick Tip.
So following the examples in the Editorial, we'll assume you have a page with three columns. The center column uses natural (i.e. static) positioning and includes margins that leave room for the left and right columns, which use absolute positioning. The id attributes of the column <div> tags are left, content, and right.
Instead of dealing with the differences between browsers, we'll leave it to the professionals and use the excellent X script from Cross-Browser.com. Simply download x.js from that site and load it in the <head> tag of your page as follows:
<script src="x.js" type="text/javascript">
</script>
Now, because the footer may well be covered by the left and right columns when the browser lays them out, we'll want to keep the footer invisible until we've adjusted the column heights. Make sure the footer <div> has id="footer" set and add this style rule to the <head> tag of your document:
<style type="text/css">
#footer {
visibility: hidden;
}
</style>
Now, when the browser has finished loading the page (and whenever the browser window is resized), we want to find out which of the columns is the tallest and resize them all to that height. Then we can display the footer.
Because this process may happen repeatedly as the user resizes the browser window, we need to wrap the content of each column in an additional <div>. The structure of the document becomes:
<div id="left">
<div
id="leftcontent"><!--left--></div>
</div>
<div id="content">
<div
id="contentcontent"><!--content--></div>
</div>
<div id="right">
<div
id="rightcontent"><!--right--></div>
</div>
It is these "inner" <div> we will check for the natural height of each column before setting the height of the "outer" <div>.
Here's the JavaScript function that adjusts the layout using the X library's xHeight and xShow functions:
<script type="text/javascript">
function adjustLayout()
{
// Get natural heights
var cHeight = xHeight("contentcontent"
;var lHeight = xHeight("leftcontent"
;var rHeight = xHeight("rightcontent"
;// Find the maximum height
var maxHeight =
Math.max(cHeight, Math.max(lHeight, rHeight));
// Assign maximum height to all columns
xHeight("content", maxHeight);
xHeight("left", maxHeight);
xHeight("right", maxHeight);
// Show the footer
xShow("footer"
;}
All that's left is to make this function run when the page is loaded or resized. This is done with xAddEventListener:
window.onload = function()
{
xAddEventListener(window, "resize",
adjustLayout, false);
adjustLayout();
}
</script>"
Can find some good info there.
Max