Small CSS problems that are driving me crazy

I've got two problems in a site that should have been quite easy.
www.artdog.adslink.cz/flow

For some reason, I can't get the left navigation area to be 100% vertical. I just can't figure out what the problem is.

Also, I have a grey left and right border on the main content div. It shows up fine in IE but not in Firefox.

Someone help. Please! My head is spinning over this one.

Css is pasted below
/* CSS Document */
#wrap{
height:auto;
width:650px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}


#content {
height:auto;
width:650px;
margin: 0;
border-top-width: 8px;
border-right-width: 8px;
border-left-width: 8px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-right-color: #999999;
border-left-color: #999999;
}
#border {
background-color: #AFAFAF;
width: 8px;
height: 100%;
}
#header {
float: left;
height: 64px;
width: 649px;
border-bottom-width: 8px;
border-bottom-style: solid;
border-bottom-color: #CA9700;
border-top-color: #362E2C;
border-top-style: solid;
border-top-width: 8px;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #000000;
}
#middle {
float: right;
height: 100%;
width: 650px;
border-right-color: #000000;
border-right-style: solid;
border-right-width: 1px;
background-color: #FFFFFF;
border-top-color: #000000;
border-top-width: 1px;
border-top-style: solid;

}
#left {
height: 100%;
width: 128px;
background-color: #E5E5E5;
border-right-style: solid;
border-left-color: #000000;
border-left-style: solid;
border-left-width: 1px;
border-right-color: #000000;
border-right-width: 1px;
float: left;
}
a.nav {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
line-height: 20pt;
color: #000000;
}
a.nav:hover {
font-size: 9pt;
color: #CA9700;
}
a.footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #FFFFFF;
}
a.footer:hover {
color: #000000;
}
#navlinks {
height: 100%;
width: 110px;
padding-left: 20px;
}
#maintext {
float: left;
height: auto;
width: 472px;
padding-top: 10px;
padding-right: 20px;
padding-left: 25px;
}
.header {
font-family: Arial, Helvetica, sans-serif;
font-size: 18pt;
font-weight: normal;
color: #330000;
width: 95%;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #666666;
margin-bottom: 10px;
}
.bodytext {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
line-height: 18pt;
text-align: justify;
}
#footer {
float: left;
width: 649px;
background-color: #cc9900;
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #FFFFFF;
height: 30px;
border: 1px solid #000000;
}
#footer .copyright {
float: left;
margin-left: 20px;
margin-top: 8px;
}
#footer .privacy {
float: right;
margin-top: 8px;
margin-right: 20px;
}

 

You are using your floats incorrectly.

It really doesn't pay wasting any more of your time "patching it up", it's better if you do it right from the start.

Take a look at One True Layout and use that as a basis for your template.

 

Wow, one true layout has some beautifully hacked/patched code covering so many bases - I like!

 

add
float: left; to #navlinks

and modify the float code in #middle
float: right;

 

All those declarations where you have a margin-top, margin-bottom, etc can all be combined into one statement.

margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

Becomes: margin: 10px 20px 30px 40px;

The first value starts at the top and works clockwise from the top. You can also do:

margin: 10px 50px;

which is 10px for the top/bottom and 50px for the left/right.