3 column sticky footer
- by blackessej
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.
