/* Sticky footer styles */

* {
    margin:0;
    padding:0;
} 

html, body, #wrap {
    height: 100%;
}

body > #wrap {
    height: auto;
    min-height: 100%;
}

#content {
    padding-bottom: 50px;  /* must be same height as the footer */
}  

#footer {
    position: relative;
    margin-top: -50px;  /* negative value of footer height */
    height: 50px;
} 


/* gogga 3 column layout - center column have to be longest :s */
/* CC have to be longest - otherwise LC and RC will overlap footer */

#center{
    margin: 0 11em 0 11em;  /* RC width + padding /  LC width + padding */
}

#left {
    width: 10em;            /* LC width */
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}

#right {                    /* RC width */
    width: 10em;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 1;
}

#content{
    position: relative;  /* RC an LC is relative to this div */
    margin: 0 auto;      /* center it in #wrap */
    width: 100%;         /* FOR IE6 (gives hasLayout and fix positioning problems) */
    min-width: 600px;    /* for the rest */
}

/* if #center is not the longest: workaround */
/* 
#footer {
    margin-left: 12em;
    margin-right: 12em;
    min-width: 600px;    
    max-width: 1200px;
}
*/

/* prettify styles */

#center {
    padding: 0 1em;
    background: #DDD;
}

#left {
    padding: 0 0 0 1em;
    background: #66F;
}

#right {
    padding: 0 1em 0 0;
    background: #F66;
}

#content {
    background-color: blue;
}

#footer {
    background-color: red;
}

#header {
    padding: 1em;
    background-color: yellow;
}