problem with width(ie)

[Ninjakreborn]

Based on my original css knowledge, it went up almost 85 percent, within the past 4-5 day's.  I got a subscription online to safari books, infinite reading, permanent resources. At this point after reading over halfway through css the missing manual, I have learnt a lot.  I started learning how to do shorthand, decendent selector's, making coding quicker, faster, and more cross browser compatible.  Atleast 45 percent overall of the browser problem's I use to have I found out are easy to overcome with knowledge.

I ran into one problem I was unable to figure out.  I was reworking a lot of the css on my website
www.freelancebusinessman.com starting with getting it looking like the original template, and frmo there making modifications based on advice from critique.  Right now I redid a lot of the coding, to match what I had learnt, making it more readable, and better looking, and actually better functioning and easier to mantain. A this point, when I was redoing part of the css for the logo, I decreased the width and height, and got it almost perfect, I redid the css for the footer nav, and made it a lot better looking. At this point I have the footer set to a height of pixel's.  It looks perfect(almost 99% like I want it in firefox and opera, but in internet explorer, it's not showing the right height.  I also learnt about the thing where sometimes margins, or padding I Don't remember can either 1. collapse, or 2 get combines, that helped most of my issue's I was having, this one isn't seem to be related to that.  any advice


[code]body { /* Body Styles */
margin:0px;
padding:0px;
background-color:#FFFFFF;
color:#000000;
}

#header {
width:100%;
background-color:#f2faf5;
color:#000000;
height:25%;
float:left;
}

#leftnav {
float:left;
width:19%;
height:75%;
background-color:#f2faf5;
color:#000000;
overflow:visible;
}
/* left nav links */
#leftnav ul {
padding-left:5px;
list-style:none;
}

#leftnav a:link {
background-color:#f2faf5;
color:#006600;
}

#leftnav a:visited {
background-color:#f2faf5;
color:#333300;
}

#leftnav a:hover {
background-color:#f2faf5;
color:#003300;
}

#rightcontent {
background-color:#FFFFFF;
color:#000000;
height:50%;
width:70%;
float:left;
}

#footer {
background: url(../images/bottombar.gif) repeat #FFFFFF;
color:#FFFFFF;
width:99.3%;
height:29px;
text-align:right;
float:left;
border-left: medium solid #cccccc;
border-right: medium solid #cccccc;
border-top: thick solid #cccccc;
border-bottom: thick solid #cccccc;
}

/* footer links */
#footer ul {
list-style-type:none;
margin-top: 2px;
}

#footer li {
display:inline;
}

#footer a:link {
color:#FFFFFF;
}

#footer a:visited {
color:#666666;
}

#footer a:hover {
color:#CCCCCC;
}
/* Quick styles */
.bold { /* Specific text in left nav that needs bolded */
font-weight:bold;
font-size:0.9em;
}

h1, h2, h3, h4, h5, h6 {
background-color: #f2faf5;
color: #000000;
font-family: "Courier New", Courier, monospace;
}

/* Style related to links spread throughout pages */
.links {
list-style:none;
}

.links a:link {
background-color:#FFFFFF;
color:#006600;
}

.links a:visited {
background-color:#FFFFFF;
color:#333300;
}

.links a:hover {
background-color:#FFFFFF;
color:#003300;
}

.links2 a:link {
background-color:#FFFFFF;
color:#006600;
}

.links2 a:visited {
background-color:#FFFFFF;
color:#333300;
}

.links2 a:hover {
background-color:#FFFFFF;
color:#003300;
}

/* For displaying code */
.specialtext {
font-size:12px;
background-color:#999999;
}
/* End displaying code */[/code]

Edit - also I noticed my left nav, doesn't go down all the way to the footer, I need the actual background color, and border I am going to create to go all the way down to the foot of the page, is there a way to do this with css?
if so how?

[Ninjakreborn]

For the 2nd problem I found out it's called
Equal Height CSS Columns
I don't understand a way to do this without something tricky.  So far I have been able to get things under control.  But these 2 problems are still bugging me, for one does anyone know of a way to fix this.  To make them equal just using CSS, with no background images.  Because currently I have it with a background color, I am going to add a border as well, but I was wondering if there's  a way to make it extend down to the footer?