Help This is driving me crazy..(height/box problems)

[Jersey Joe]

First here is a link to one of my pages so you can get a better idea of my problem..http://www.meanguns.cz.cc/index.php?mod=board

 

As you can see at the bottom of the page that my left and right div containers don't stretch to the bottom footer as I want them to..

 

I need for both the left and right side columns to stretch to the full height//PLEASE HELP!!!!

 

Now here is the CSS that I have First is the layout css

 

 

body {
background-image: url("images/background.jpg");
font-family: arial;
font-size: 8pt;
color: #FFFFFF;
margin: 0px;
padding: 0px;
text-align: left;
    height: 100%;
}

#main {
width: 1000px;
margin: 0 auto;
    height: 100%;

}

#header {
width: 960px;
height: 33px;
padding-top: 153px;
padding-left: 40px;
background-image: url("images/header.jpg");
float: left;
}

#leftspan {
width: 202px;
background-color: transparent;
    background-image: url("images/bzna.jpg");
    background-repeat: repeat-y;
float: left;
height: 100%;
}

#cntspan {
width: 597px;
background-color: transparent;
float: left;

}

#rightspan {
width: 201px;
height: 100%;
background-color: transparent;
float: right;
}

#footer {
width: 1000px;
height: 30px;
float: left;
background-image: url("images/footer.jpg");
}

.bznleft {
width: 137px;
height: 100%;
padding-left: 50px;
padding-right: 15px;
padding-top: 2px;
background-image: url("images/bzna.jpg");
    background-repeat: repeat-y;
font-size: 9pt;
font-weight: bold;
float: left;
text-align: center;
}

.bznright {
width: 137px;
height: 100%;
padding-left: 14px;
padding-right: 50px;
padding-top: 2px;
background-image: url("images/bznb.jpg");
font-size: 9pt;
font-weight: bold;
float: left;
text-align: center;
}

.leftbox {
width: 147px;
height: 100%;
padding-left: 44px;
padding-right: 9px;
background-image: url("images/bga.jpg");
    background-repeat: repeat-y;
float: left;
text-align: left;
}

.rightbox {
width: 137px;
height: 100%;
padding-left: 14px;
padding-right: 50px;
background-image: url("images/bgb.jpg");
background-repeat: repeat;
float: left;
}

#leftfooter {
width: 202px;
height: 2em;
float: left;
background-image: url("images/boxfa.jpg");
    background-repeat: repeat-y;
}

#rightfooter {
width: 201px;
height: 2em;
float: left;
background-image: url("images/boxfb.jpg");

}

#rightfootera {
width: 201px;
height: 2em;
float: left;
background-image: url("images/boxfc.jpg");
background-repeat: repeat;
}

.bznrightb {
width: 137px;
height: 100%;
padding-left: 14px;
padding-right: 50px;
padding-top: 2px;
background-image: url("images/bznc.jpg");
font-size: 9pt;
font-weight: bold;
float: left;
text-align: center;
}

.headerbutton, .headerbutton:link, .headerbutton:active, .headerbutton:visited {
width: 90px;
height: 15px;
background-color: transparent;
float: left;
margin-right: 19px;
font-size: 8pt;
text-align: center;
text-decoration: none;
color: #FFFFFF
}

.headerbutton:hover {
width: 90px;
height: 15px;
background-color: #2e3436;
float: left;
margin-right: 19px;
font-size: 8pt;
text-align: center;
text-decoration: none;
color: #FFFFFF
}

.navibutton, .navibutton:link, .navibutton:active, .navibutton:visited {
width: 141px;
height: 15px;
font-family: verdana;
background-color: transparent;
padding-left: 5px;
font-size: 8pt;
text-align: center;
text-decoration: none;
color: #FFFFFF;
float: left;
text-align: left;
}

.navibutton:hover {
width: 141px;
height: 15px;
font-family: verdana;
background-color: #2e3436;
padding-left: 5px;
font-size: 8pt;
text-align: center;
text-decoration: none;
color: #FFFFFF;
float: left;
text-align: left;
}

a:link, a:visited, a:active  {
background-color:inherit;
color:#FFFFFF;
text-decoration:underline;
font-weight: normal;
font-size:8pt;
}
a:hover {
background-color:inherit;
color:#999999;
text-decoration:underline;
font-weight: normal;
font-size:8pt;
}

 

 

and now the clansphere css

/* $Id: clansphere.css 232 2006-08-19 16:07:22Z hajo $ */

div,span {
    
font-family:Tahoma,Helvetica,sans-serif;
}

nav_link {
background-image: url(images/cell_bg.jpg);
color:inherit;
padding:4px 6px 4px 8px;
}

img {
border:0px;
}
form {
display:inline;
}

input, textarea, select {
background-color:#fff;
border:1px groove #333333;
color:#000;
font-family:Verdana,Helvetica,sans-serif;
font-size:7pt;
margin:3px;
padding:2px;
}
td {
    background-image: url(images/cell_bg.jpg);
background-color:inherit;
color:#ffffff;
font-size:8pt;
vertical-align:top;
}
textarea {
width:90%;
}
ul {
margin:0px;
}

#nav-left,#content,#bottom {
    background-image: url(images/cell_bg.jpg);
float:left;
margin:auto;
height: 100%;
}

#nav-left {
    background-image: url(images/cell_bg.jpg);
width:14%;
height: 100%;
}
#nav-right {
float:right;
width:20%;
    height: inherit;
}
#content {
    background-image: url(images/cell_bg.jpg);
background-color:inherit;
color:#D5D0D0;
text-align:center;
width:66%;
border:2;
border-color:#ffffff;
}
#bottom {
background-color:#444444;
border:1px solid #000000;
color:#D5D0D0;
margin-top:20px;
padding:4px 0px 4px 0px;
width:100%;
}
#head {
background-color:#553300;
border:1px solid #000000;
color:#D5D0D0;
font-size:25pt;
height:100px;
margin-bottom:5px;
text-align:left;
width:100%;
}
#debug {
height:150px;
margin-bottom:20px;
overflow:auto;
padding-left:4px;
width:100%;
text-align:left;
}
#errors {
color:#880000;
}
#sql {
color:#c0c0c0;
}
.h1 {
color: #c0c0c0;
font-size: 14pt;
font-weight: bold;
text-decoration: none;
}
.h2 {
color: #c0c0c0;
font-size: 16pt;
font-weight: normal;
text-decoration: none;
}
.h3 {
color: #c0c0c0;
font-size: 20pt;
font-weight: normal;
text-decoration: none;
}
.form {
background-image: url(images/cell_bg.jpg);
border:1px solid #111111;
color:#BDBDBD;
font-family:Tahoma,Helvetica,sans-serif;
font-size:8pt;
margin:1px;
padding-left:3px;
}
.forum {
background-color:#000000;
color:inherit;
margin:auto;
}
.headb {
background-image: url(images/cell_bg.jpg);
color:#c0c0c0;
font-size:8pt;
font-weight:bold;
text-align:left;
padding:8px 10px 9px 8px;
}
.bottom {
background-image: url(images/cell_bg.jpg);
color:inherit;
padding:4px 6px 4px 8px;
text-align:left;
}
.newshead {
background-image: url(images/bg_head.jpg);
color:#c0c0c0;
font-size:8pt;
font-weight:bold;
text-align:left;
padding:8px 10px 9px 8px;
}
.left,.center,.right {
padding:1px;
}
.leftb,.centerb,.rightb {
background-image: url(images/cell_bg.jpg);
color:inherit;
padding:4px 6px 4px 8px;
}
.leftc,.centerc,.rightc {
background-image: url(images/cell_bg.jpg);
color:inherit;
padding:4px 6px 4px 8px;
}
.left,.leftb,.leftc {
text-align:left;
}
.center,.centerb,.centerc {
text-align:center;
}
.right,.rightb,.rightc {
text-align:right;
}
.quote {
background-color:#663800;
border:1px solid #000000;
color:inherit;
padding:6px;
text-align:left;
}
.navhead,.navhead2 {
background-color:#BB8800;
border:solid #000000;
border-width:1px 1px 0px 1px;
color:#005500;
font-weight:bold;
padding:4px;
text-align:center;
}
.navbodyb,.navbody2b {
background-color:#886600;
border:1px solid #000000;
color:inherit;
list-style:none;
padding:4px 6px 4px 8px;
text-align:left;
}
.calhead {
background-image: url(images/cell_bg.jpg);
color:inherit;
padding:4px 2px 4px 2px;
text-align:center;
}
.calday,.calevent,.caltoday, .calweek {
padding:4px 2px 4px 2px;
text-align:right;
}
.calday {
background-color:#444444;
color:inherit;
}
.calevent {
background-color:#222222;
color:inherit;
}
.caltoday {
background-color:#333333;
color:#CCCCCC;
}
.calweek {
background-image: url(images/cell_bg.jpg);
color:inherit;
}

.nav_link {
color:inherit;
padding:2px 2px 2px 2px;
text-align:left;
}

.nav_link2 {
background-image: url(images/bg_box.jpg);
color:inherit;
padding:2px 2px 2px 2px;
text-align:left;
}


/*Manage*/
.manage {
  background-color: #232323;
  border: 1px solid #999999;
  margin: 5px;
  padding: 5px 0px 0px 0px;
}
.manage:hover {
  background-color:#333333;
}

/*Themebar*/
.themebar {
  border: 1px dashed #777777;
  margin: 4px 8px 4px 8px;
  padding: 4px;
}

.notpublic {
  background-color:#666666 !important;
  color:#fff !important;
  font-style:italic;
}

#msg_normal, #msg_success {
width: 90%;
  color:inherit;
  margin:auto;
  border: 1px solid #888;
  margin-bottom: 10px;
  text-align:center;
}
#msg_normal div, #msg_success div {
padding: 8px 0 8px 20px;
}
#msg_normal {
background-color: #232323;
}
#msg_success {
background-color: #444444;
}

[haku]

http://www.alistapart.com/articles/fauxcolumns/