My Solution to CSS Faux Columns

Posted on Fri, 23 Mar 2007
 at 09:15:59

     So the new template of Dan Blog is finally launched. One of the problems I encountered along the way was the infamous faux CSS columns to which I made my own solution. It's not unique but it's nice and simple, and I have tested it in Opera 9.1, Firefox 2.0+, Internet Explorer 7 and Internet Explorer 6 all on Windows Vista and XP (let me know if you test it on another platform or another browser or browser version).

      The solution I used requires JavaScript, which means that it obviously won't work on non-JavaScript enabled browsers.

     So straight into the CSS code for the layout.

#main {
     width: 600px; /* Can be changed to whatever */
}

#main #left {
     width: 300px; /* Can be changed to whatever */
     float: left;
}

#main #right {
     width: 300px;
     float: right;
}

     Pretty obvious what this code does - #main acts as a container for the 2 different columns, #left and #right. I'll let you guess which side is which. It is important that #left and #right are ID's and not classes. Put this into your HTML the way you would with any CSS - divs. For example:

<div id="main">
     <div id="left"></div>
     <div id="right"></div>
</div>

     Right, now for the JavaScript. This is pretty simple compared to some of the solutions I have seen - this is mainly because of the lack of effects in my code - no fancy animations; any way, on to the code.

function MakeSameHeight() {
     // Make the left and right columns the same height.
     // Do this by making the shortest the same length as the tallest.
     var leftHeight = document.getElementById('left').offsetHeight;
     var rightHeight = document.getElementById('right').offsetHeight;
     if(rightHeight < leftHeight) {
          // Make the right side taller
          document.getElementById('right').style.height = leftHeight + "px";
     } else if(leftHeight<rightHeight) {
          // Make the left side taller
          document.getElementById('left').style.height = rightHeight + "px";
     } else {
          // Already the same height
     }
}

window.onload = function() {
     MakeSameHeight();
}

     Not too complex - the height of the two columns is found, then the if statements decide which is taller and then make the shorter one the same height. The window.onload part simply makes the function run when the page has finished loading. To see the code in action look at this site.

     As I said at the beginning, if you have used this on a platform or browser that I haven't stated above please e-mail me to let me know if it works. Make sure to include your OS and browser name/ version. Thanks in advance :).


Add this page to Stumble.

There are 1 Comments Below | Add a Comment

Thomas B said...
I had heard of people using javascript to correct rendering "errors" to make a page more attractive and symmetrical but never found a code example. Thanks Dan!
...on Fri, 23 Mar 2007 at 12:50:50.

Sorry, now there's advertising.

web design css html xhtml php mysql dan blog seo search engine optimization search engine optimisation blog web design blog software forums open source freeware tutorial tutorials javascript ajax