max width, odd navigation problem, question

First off, here is what I'm working with:

http://exiledknights.net
a:link{
color:#759AB3;
background:inherit;
text-decoration:none;
font:13px Trebuchet MS, Arial;
}
a:visited{
color:#759AB3;
background:inherit;
text-decoration:none;
font:13px Trebuchet MS, Arial;
}
a:hover{
color:#003A4D;
background:inherit;
text-decoration:underline;
font:13px Trebuchet MS, Arial;
}
body{
background:#003A4D;
color:#000;
font:16px Trebuchet MS, Arial;
}
pre{
font:12px Andale Mono;
}
.box{
color:inherit;
background:#FFF;
border:1px solid #000;
margin-top:0px;
margin-left:0px;
width:100%;
height:100%;
}
.rightnav{
float:right;
border:none;
color:inherit;
background:inherit;
margin-right:6.2em;
}
.header{
bottom-border:1px dotted #000;
width:100%
height:60px;
background:#435866;
color:#000;
font:24px Trebuchet MS, Arial;
padding-left:8px;
}
.header a:link{
color:#759AB3;
background:inherit;
text-decoration:none;
font:24px Trebuchet MS, Arial;
}
.header a:visited{
color:#759AB3;
background:inherit;
text-decoration:none;
font:24px Trebuchet MS, Arial;
}
.header a:hover{
color:#003A4D;
background:inherit;
text-decoration:underline;
font:24px Trebuchet MS, Arial;
}
#content{
border:none;
font:13px Trebuchet MS, Arial;
width:500px;
margin-right:22em;
height:auto;
color:inherit;
background:inherit;
padding:8px;
float:right;
}
.footer{
top-border:1px dotted #000;
width:100%
height:30px;
background:#435866;
color:#000;
font:13px Trebuchet MS, Arial;
padding-left:40%;
}
#navigation {
margin-top:3em;
}
#topnavigation li {
display: inline;
list-style-type: none;
padding-right: 15px;
font:18px Trebuchet MS, Arial;
}
#topnavigation li a {
color: #4E4E4E;
text-decoration: none;
font-weight: bold;
font:18px Trebuchet MS, Arial;
}
#topnavigation li a:hover {
color: #800000;
text-decoration: underline;
font:20px Trebuchet MS, Arial;
}

#navigation li a {
color: #000;
text-decoration: none;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000000;
width: 100px;
display: block;
padding: 3px;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #FFFFFF;
border-left-color: #FFFFFF;
text-align: left;
background-color: #FFFFFF;
}
#navigation {
width: 100px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
}
#navigation li {
list-style-type: none;
}
#navigation li a:hover {
text-decoration: none;
color: #FFFF80;
background-color: #0080C0;
}

Lets start with a simple question.
Is there a difference between width: and max-width: ?

For my div, .box, I have set the width to 100%. In IE, it creates a white space to the right. This might be the header, actually. (.header) Would it be better to simply set a width? I intended for the page to span across, but it would probably be better to set the width for my .box to be, say, 1100px?

Also - in IE 6.0, my navigation is underneath my content. This may be linked to the 100% thing.

http://jlhaslip.trap17.com/samples/templates/2_col_left/index.html

Width and max-width are different, yes.
Width is a stated value, max-width says for the item to be 'no bigger than' the value. It can be smaller.

IE6 likely doesn't like the floats, padding, margins. It doesn't play fair.
Look at the link I posted. It is a 100% width on the full page with a fixed width left hand sidebar for navigation which is measured in em's. Change that value to px if you need to, but you will also need to put a 'slightly' larger value to the margin-left of the content area for the float to work properly. This should work fairly well in most Browsers around the Web today. Might be a few IE5/mac's around that burp a little. Can't recall if this works in IE/mac or not.

Thanks. I'm going to school now, but I will be sure to try that out.

Mac's don't have IE. If they do, they are ancient and need to be replaced anyways lol :P

I may check it in safari and opera too (mac os). The windows safari should be the same as mac safari, you would assume.