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

http://jsfiddle.net/HMsKa/4/

Here is the HTML

Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en-US">
    <head>
            <title>Title</title>
            <link href="/static/css/main.css" rel="stylesheet" type="text/css">
        </head>
        <body>
            <div id="container-wrap">
                <div id="header-wrap" class="full_width">
                    <div id="header-container" class="dc1">
                        <div id="header" class="thin_width rel">
                            <a href="/"><img src="/static/img/header.jpg" id="logo" alt="coming soon" title="coming soon"></a>
                            <ul>
                                <li><a href="/posts/list/">Link1</a></li>
                                <li><a href="/posts/create/">Link 2</a></li>
                                <li><a href="/about">Link 3</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
    
                <div id="container" class="thin_width">
                    <div class="full_width" style="height:auto;">
                         <div class="lft">Test</div>
                         <div class="rgt">Test</div>
                        <div id="col-main">                
            <h1>Sed ut perspiciatis unde</h1>
                <div id="fullwidth">
                    <form id="searchForm" action="/search">
                            <input type="text" name="kw" class="field r2 lft dc1 tc5 b1 ts3" id="field_regular" placeholder="Keyword">
                            <input type="text" name="loc" class="field r2 lft dc1 tc5 b1 ts3" id="field_regular" placeholder="Location">
                            <input type="submit" class="button r2 b1 ts3" id="button_search" value="Search">
                    </form>
                </div>
                <p>Sed ut perspiciatne voluptatem sequi nesciunt.</p>
         </div>
                   </div>                    
                </div>
    
                <div id="footer-wrap" class="thin_width">
                    <div id="footer-container" class="full_width abs dc1">
                        <div id="footer" class="thin_width rel">
                        © 2012 Company, Inc.
                        <ul>
                            <li><a href="/contact">Contact</a></li>
                            <li><a href="/faq">FAQ</a></li>
                            <li><a href="/terms">Terms</a></li>
                            <li><a href="/privacy">Privacy</a></li>
                        </ul>
                       </div>
                    </div>
                </div>
            </div>
        </body>
    </html>​
Here is the CSS:

Code:
    /* 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; } 
    blockquote { font-style: italic; }
    
    /*POSITIONING */
    .lft { float: left; }
    .rgt { float: right; }
    .rel { position: relative; }
    .abs { position: absolute; }
    
    /* TEXT COLOURS */
    .tc6 { color: #4C4C4C; }
    .tc5 { color: #333333; }
    .tc4 { color: #999999; }
    .tc3 { color: #808080; }
    .tc2 { color: #F5F5F5; }
    .tc1 { color: #FFFFFF; }
    
    /* TEXT STYLING */
    .bold { font-weight: bold; }
    .italic { font-style:italic; }
    
    /* TEXT SIZES */
    .ts5 { font-size: 21px; }
    .ts4 { font-size: 18px; }
    .ts3 { font-size: 15px; }
    .ts2 { font-size: 13px; }
    .ts1 { font-size: 11px; }
    
    /* DIV COLOURS */
    .dc6 { background-color: #4C4C4C; }
    .dc5 { background-color: #333333; }
    .dc4 { background-color: #999999; }
    .dc3 { background-color: #808080; }
    .dc2 { background-color: #F5F5F5; }
    .dc1 { background-color: #FFFFFF; }
    
    /* WIDTHS */
    .full_width { width: 100%; }
    .thin_width { width: 940px; }
    
    /* BORDERS */
    .b1 { border: 1px solid; }
    
    /* RADIUS */
    .r6 { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
    .r2 { border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
    
    /* FIELD */
    .field { line-height:27px; font-family:arial, sans-serif; border-color: #d9d9d9; border-top:solid 1px #c0c0c0; padding-left:5px; margin-right: 15px; width:250px; }
    
    /* BUTTON */
    .button  { cursor:pointer; font-family: arial, sans-serif; min-width: 70px; padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px; color: white; }
    .button:hover { border: 1px solid #2F5BB7; }
    .button:active { -moz-box-shadow: 0 0 2px #888; -webkit-box-shadow: 0 0 2px #888; box-shadow: 0 0 2px #888; }
    
    /* BUTTONS */
    #button_search { height: 34px; background: url(http://www.divology.com/wp-content/themes/divology/tutorials/google-search/ico-search.png) no-repeat #4d90fe center; border: 1px solid #3079ED; text-indent:-999px; color: transparent; line-height:0; font-size:0; }
    #button_primary { border-color: #3079ED; background-color: #55A4F2; }
    #button_secondary { border-color: gray; }
    #field_regular { height:27px; }
    
    /* FIELDS */
    #field_large { height:300px; }
    
    /* HEADER */
    #header-wrap { top: 0; left: 0; }
    #header-container { line-height: 60px; height: 60px; border-bottom: 1px solid #E5E5E5; }
    #header { margin: 0 auto; position: relative; }
    #header h1 { color: #beffbf; text-align: left; width: 290px; margin: 0; position: absolute; left: 0; top: 20px; }
    #header h1 em { color: #90b874; font-size: small; display: block; }
    #header ul { top:0; margin: 0; padding: 0; list-style: none; position: absolute; right: 0; }
    #header ul li { float: left; margin-right: 5px; }
    #header ul li a{ color: #90b874; font-weight: bold; font-size: 1.4em; margin-right: 5px; text-decoration: none; }
    #header ul li a:hover { color: #beffbf;  }
    
    /* CONTAINER */
    #container { margin: 0 auto; font-size: 1.4em; overflow: auto; padding: 31px 0 80px 0px; }
    #container-wrap { min-height:100%; position:relative; min-width: 940px; }
    #logo { height:20px; }
    
    /* FOOTER */
    #footer-wrap { bottom: 0; left: 0; }
    #footer-container { line-height: 60px; height: 60px; bottom: 0; border-top: 1px solid #E5E5E5; }
    #footer { margin: 0 auto; position: relative; }
    #footer ul { margin: 0; padding: 0; list-style: none; position: absolute; top: 0; right: 0; }
    #footer ul li { float: left; margin-right: 5px; }
    #footer ul li a { color: #90b874; font-size: 12px; padding-left: 10px; padding-right: 10px; text-decoration: none; }
    #footer ul li a:hover { color: #beffbf;  }
    
    #faq EM { display:none; }
    #faq LI STRONG { font-weight:normal; color:#246; text-decoration:underline; cursor:pointer; }
    
    .hidden { display:none; }
    
    #content{
        background: orange;
        height: auto;
    }
    
    #col-main { overflow:hidden;  }
I am new to CSS coding, and I have had to make a lot of decisions without really knowing my stuff. I would love to get feedback to see if I can improve this code, especially with regards to making it cleaner, short code or more compatible.