html, body, #box {
    padding:0px;
    margin:0px;
    height:100%;
    min-height:100%;
}

body {
    background-image:url(images/footerbg.png);
    background-repeat:repeat-x repeat-y scroll;
    font-size:12px;
    font-family:Georgia;
    color:#564b47;
}

p, h1 {
    margin:0px 10px 10px 10px;
}

h1 {
    font-size:14px;
    padding-top:10px;
    text-transform:uppercase;
    color:#564b47;
    background-color:transparent;
}

a {
    color:#ff66cc;
    font-size:11px;
    background-color:transparent;
    text-decoration:none;
}

pre {
    color:#564b47;
    font-size:11px;
    background-color:transparent;
}

#box {
    position:relative;
    width:750px;
    margin:0 auto;
    text-align:left;
    height:auto!important;
}

#shadow {
    background:url("images/shadow.png") repeat-y scroll 0 0 transparent;
    width:760px;
    margin:auto;
    padding:0px;
    text-align:left;
    height:100%;
    z-index:0;
    margin-bottom:-40px;
}

#left {
    width:175px;
    float:left;
    background-color:#ff99cc;
    height:auto!important;
    height:100%;
    min-height:100%;
    text-align:left;
}

#content {
    width:400px;
    float:left;
    overflow:auto;
    background-color:#fff;
    height:auto!important;
}

#right {
    width:175px;
    float:right;
    background-color:#ff99cc;
    height:auto!important;
    height:100%;
    min-height:100%;
    text-align:right;
}

#head {
    background-image:url(images/banner.png);
    background-repeat:no-repeat;
    background-color:#000;
    height:125px;
    text-align:center;
    margin:auto;
}

#menu {
    width:100%;
}

p a {
    color:#000;
    text-decoration:underline;
}

a {
    color:#fb0303;
    text-decoration:none;
    outline:none;
}

a:visited {
    color:#fb0303;
}

p a:hover {
    text-decoration:underline!important;
}

ul#nav {
    margin:auto;
    width:100%;
}

ul#nav li a {
    display:block;
    font-size:12px;
    font-weight:bold;
    padding:4px;
    background:#000;
}

ul#nav li a:hover {
    background:#000;
    color:#fff;
}

li {
    list-style:none;
    top:100px;
    float:left;
    position:relative;
    width:110px;
    text-align:center;
}

li ul {
    display:none;
    position:relative;
    width:auto;
    margin-left:6px;
    border-top:4px dotted #fb0303;
}

li>ul {
    top:-102px;
    left:-40px;
}

li:hover ul, li.over ul {
    display:block;
}

ul#nav li.current a {
    background:#000;
}

ul#nav li.current a:hover {
    background:#000;
}

#player {
    width:360px;
    height:240px;
    position:absolute;
    z-index:2;
}

#head h1 {
    font-size:11px;
    text-transform:uppercase;
    text-align:right;
    color:#564b47;
    background-color:#90897a;
    padding:5px 15px;
    margin:0px;
}

#head p {
    padding:10px;
    margin:0px;
}

.footer {
    position:relative;
    height:40px;
    background-color:#444;
}

I want the three columns to be 100% height so that they go all the way to the footer. Right now, they're only as long as their content.

The columns are #left, #right and #content.

Pretty new to this stuff. Please feel free to point out sloppy code, redundancy, etc. And thank you.