Complex CSS layout - Docked Footer and Elastic Content

I have based my code off several tutorials which has culminated what I think is quite a complicated CSS layout. It has a docked footer. The sidebars are turned on dynamically in my template depending if there is content. The site is designed to work in the following scenarios:

1 Column

• No div class lft

• No div class rgt

• Content in div class col-main

http://jsfiddle.net/HMsKa/

2 Columns

• Content in either div class lft or div class rgt

• Content in div class col-main

http://jsfiddle.net/HMsKa/2/

3 Columns

• Content in div class lft

• Content in div class rgt

• Content in col-main div

Here is the HTML

        Title
        
    
    
        
            
                
                    
                        
                        
                            Link1
                            Link 2
                            Link 3
                        
                    
                
            

            
                
                     Test
                     Test
                                    
        Sed ut perspiciatis unde
            
                
                        
                        
                        
                
            
            Sed ut perspiciatne voluptatem sequi nesciunt.
     
                                   
            

            
                
                    
                    © 2012 Company, Inc.
                    
                        Contact
                        FAQ
                        Terms
                        Privacy
                    
                   
                
            
        
    
​

Here is the CSS:

```
/ GENERAL /
html { height:100%; }
body { height:100%; font-family: Arial, Helvetica, sans-serif; font-weight:normal; font-style:normal; font-size:100%; }
p { font size: 13px; margin: 10px 0; padding: 0; }
h1 { font-size: 22px; }
h2 { font-size: 17px; }
h3 { font-size: 14px; }
blockq

Drop HTML4 in favor of XHTML or HTML5

There is no reason to stay with HTML4 any longer. Go with HTML5 or XHTML.

Class and ID names

Are your class and ID abbreviations really necessary? .tc1 doesn't say anything about what text color the class applies. Consider using something like .white-color or .white-text-color. The same goes for all your class and ID names. Name them so you know what they do. Your css file should not be a lookup table.

StackExchange Code Review Q#16364, answer score: 2