I can’t seem to get my footer to always be positioned after the longest of three columns. It seems to want to go right below the middle column even when the third column is the longest. For an example, see the differences between [URL=”http://www2.ccboe.com/smallwood/”]http://www2.ccboe.com/smallwood/[URL=”http://www2.ccboe.com/smallwood/aboutus/”]http://www2.ccboe.com/smallwood/aboutus/[URL=”http://www2.ccboe.com/smallwood/news/”]http://www2.ccboe.com/smallwood/news/
Any help would be much appreciated! My code is as follows:
body {
background: url(/images/smallwood/smallwood_pagebg.png) no-repeat top center #000D4F;
margin: 0;
padding: 0;
text-align: center;
color: #000D4F;
font-size:16px;
}
.thrColAbsHdr #container {
position: relative;
width: 780px;
margin: 0 auto;
text-align: left;
}
.thrColAbsHdr #header {
height: 140px;
padding: 0 10px 0 0px;
background:url(/images/smallwood/smallwood_header.gif) no-repeat left top;
}
.thrColAbsHdr #header p {
margin: 0;
padding: 3px 0;
text-align:right;
color:#FFFFFF;
}
.thrColAbsHdr #header a {
color:#FFFFFF;
}
.thrColAbsHdr #sidebar1 {
position: absolute;
top: 115px;
left: 0;
width: 140px;
padding: 15px 10px 15px 20px;
.thrColAbsHdr #sidebar1 img.first {
position: relative;
}
.thrColAbsHdr #sidebar2 {
position: absolute;
top: 105px;
right: 0;
width: 150px;
background: #ffc619;
padding: 15px 10px 15px 10px;
border: solid 1px #ffdf80;
}
.thrColAbsHdr #sidebar2 img.first {
position: absolute;
top: -75px;
margin-left: 10px;
}
.thrColAbsHdr #mainContent {
margin: -35px 180px 5px 175px;
padding: 0 10px;
background: #ffdf80;
border: solid 1px #ffc619;
height: auto;
}
.thrColAbsHdr #footer {
height:78px;
padding: 0 10px 0 20px;
background: url(/images/smallwood/smallwood_footer.png) no-repeat bottom left #ffc619;
border: solid 1px #ffdf80;
margin-top:10%;
}
.thrColAbsHdr #footer p {
margin: 0;
padding: 10px 0;
}