IE7 won't stretch my content div

[lorddemos90]

http://2hartshorne.com/prgnewsite/design2.html

 

this page looks fine in firefox and IE6.  But when I look at in in IE7, the main content div won't stretch to 100% of the screen.  It's pissing me off.  Here is my CSS for this page.

 

/* CSS Document */

#container
{
width: 100%;
background-color: #000000;
color: #333;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-color: gray;
border-right-color: gray;
border-bottom-color: gray;
border-left-color: gray;
}
body {
margin: 0px;
background-color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
}


#top
{
border-bottom-color: gray;
background-color: #000000;
height: 200px;
background-image: url(images/newheaderblackanimated.gif);
background-repeat: no-repeat;
vertical-align: baseline;
background-position: left bottom;
}

#top h1
{
padding: 0;
margin: 0;
}

#leftnav
{
width: 160px;
margin: 0;
padding: 1em;
color: #FFFFFF;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
float: left;
}

#content
{
max-width: 36em;
background-color: #000000;
color: #FFFFFF;
margin-left: 200px;
padding: 10px;
display: table-cell;
}

#footer
{
margin: 0;
padding: 5px;
color: #FFFFFF;
background-color: #005022;
height: 50px;
}

#leftnav p { margin: 0 0 1em 0; }
.navbar {
padding-left: 200px;
color: #CCCCCC;
height: 42px;
background-repeat: repeat-y;
padding-top: 4px;
}
.topbutton {
background-color: #CCCCCC;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 13px;
height: 38px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
width: 100px;
}

a.leftnav:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
}
a.leftnav:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
}
a.leftnav:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
text-decoration: underline;
}
a.leftnav:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
}
.contentbox {
background-color: #005022;
padding: 5px;
color: #CCCCCC;
}
.bottomnav {
height: 25px;
color: #FFFFFF;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 200px;
padding-top: 8px;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
width: 720px;
}
.navbox1 {
background-color: #005022;
display: inline;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
padding-top: 3px;
padding-right: 40px;
padding-bottom: 3px;
padding-left: 40px;
}
.navbox2 {
background-color: #005022;
display: inline;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
padding-top: 3px;
padding-right: 40px;
padding-bottom: 3px;
padding-left: 40px;
}
.navbox3 {
background-color: #005022;
display: inline;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
padding-top: 3px;
padding-right: 40px;
padding-bottom: 3px;
padding-left: 40px;
}
.navbox4 {
background-color: #005022;
display: inline;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
padding-top: 3px;
padding-right: 40px;
padding-bottom: 3px;
padding-left: 40px;
}
.navbox5 {
background-color: #005022;
display: inline;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
padding-top: 3px;
padding-right: 40px;
padding-bottom: 3px;
padding-left: 40px;
}
.navbox6 {
background-color: #005022;
display: inline;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
padding-top: 3px;
padding-right: 40px;
padding-bottom: 3px;
padding-left: 40px;
}
.quicksearchbox {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
line-height: 20px;
}
.quicksearchtopbox {
background-color: #005022;
padding: 5px;
color: #CCCCCC;
float: right;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
}.topinformation {
width: 700px;
}

[soycharliente]

I don't have IE7, but this code is overkill:

border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-color: gray;
border-right-color: gray;
border-bottom-color: gray;
border-left-color: gray;

 

You can clean it up AND make your file size smaller by using this:

border: 1px solid gray;

You can define the width, style, and color in one definition:

border: [width] [solid, dashed, dotted] [color];

 

Also this:

padding-top: 3px;
padding-right: 40px;
padding-bottom: 3px;
padding-left: 40px;

 

To:

padding: 3px 40px;

 

You can define the padding for each side in one definition. But there are a like three different ways:

All sides have padding of 5 pixels:

padding: 5px;

 

Top/bottom have 5 pixels; left/right have 10px:

padding: 5px 10px;

 

Each side had it's own definition in the order top, right, bottom, left:

padding: 1px 2px 3px 4px;

 

One definition: apples to all sides

Two: top/bottom then left/right

Four: Each one individually in order of top right bottom left