I made some tweaks to my blog layout specifically the columns and added a footer. The footer is where the problem started. With CSS using float for the side columns works great and the footer will fall below the main content as long as the main content column is taller then the floating columns. If not, the floating column will float over the footer. To fix this I used the prototype{#hm8i} javascript library to adjust the height of the main column if the floating column is taller. I added a MadKast{#e12e} size constant because the MadKast script will usually load after the height adjustment leaving the main content column short about 25 pixels. Anyway, here’s the code:

<script language="javascript">
_madKastSize = 25;

Event.observe(window, "load", function() {
if ($('left') && $('left').offsetHeight > $('right').offsetHeight)
$('right').setStyle({height:($('right').offsetTop + $('left').offsetHeight + _madKastSize) + "px"});
// --> </script>