CSS Layout techniques

To be honest, I've seen these layout templates before and I really can't stand them. Any layout that uses the voice family hack is off my list.

The biggest problem that all of these layout have is that they try to work around the box model difference between IE and FF. The truth is that if you always remember to start off your layout CSS with *{margin:0px;padding:0px;border:0px;} and remember to only float divs, you should never have a problem.

Another little remind is that IE and FF different when having floating div being contained within their parent div. For instance
<div id="container" style="border:1px solid red;">
<div style="float:left;width:100px;height:100px;border:1px solid blue;"></div>
<div style="float:left;width:100px;height:100px;border:1px solid green;"></div>
</div>

The trick here is to have a clear:both just before the container's closing </div> like so:
<div id="container" style="border:1px solid red;">
<div style="float:left;width:100px;height:100px;border:1px solid blue;"></div>
<div style="float:left;width:100px;height:100px;border:1px solid green;"></div>
<div style="clear:both"></div>
</div>

Just by following these two rules you will not have to resort to hacks 99.999% of the time and your layout will display properly across all browsers

I'm trying to add a footer to the 4 columns, all fluid layout. Everything I do results in the footer "underlayed" by the columns. Do you have any suggestions on how to add a footer to this example that will move down as the columns grow? Thanks.