Article
Exploring the Limits of CSS Layout
Page: 1 2
JavaScript to the Rescue!
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>
And that does it! See it in action for yourself!
The Future
But how about the future? The working draft of CSS3 includes multi-column layout module, but it is designed for flowing text across columns of equal width, not for newspaper-style layouts with varying columns widths.
The best bet for pure CSS multi-column layouts that I see on the horizon is the display-model and display-role properties in the CSS3 box model. In a particularly ironic twist, these properties would let you set the column blocks to behave as table cells for the purposes of layout. Design techniques would come full circle while still preserving the content/style division of CSS layout.