I'm very new to html and css so feel free to critique any bad practices you see in the code below... 

I am trying to create a centered column that's 800 pixels across and the banner will be resized to 800 pixels. When view this page in chrome or firefox it looks great. When I view it in IE8 the font is huge, there is a giant empty spot on the right side of the banner all the way down to the bottom, and the size of the "container" will not change no matter what I do in the css file.

CSS:

```
body {
    font-family: Arial;
    font-size: small;
    background-color: #FFFFFF;
    background-image: url(../images/victorianBackground.jpg);
    background-position: top;
    background-repeat: repeat;
    color: #000000;
}
#container {
    margin: -10 auto;
    background-color: #D3CDBA;
    text-align: left;

}

html>body #container {
    width: 800px;
    min-height:800px;
    padding: 0 0px;
}

#banner {
    width:800px;
}

#banner img {   
    width:800px;    
    padding:45 0px;
}

#content {
    width:500px;
    padding: 15px;
    background-color: transparent;
}

/* Navigation */
#navigation ul {
    list-style-type: none;
    width: 800px;
    margin: 0;
    padding: 0;
}
#navigation li {
    float: left;    
    background-color: #D3CDBA;
}
#navigation li:hover {
    float: left;    
    color: #4676A4;
    background-color: #D3CDBA;
}
#navigation a {
    font-weight: bold;
    text-decoration: none;
    color: #000000;
    display: block;
    padding: 5px;
}
#navigation a:hover {
    font-weight: bold;
    text-decoration: none;  
    color: #992332;
}

#content a {    
    color:teal;
}

```

HTML:

```
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Park Avenue Neighborhood Association</title>
        <meta name="keywords" content="Park Avenue Neighborhood Association Syracuse New York"/>
        <link rel="stylesheet" type="text/css" href="../styles/style1.css">
    </head>

    <body>

<div id="container">

        <div id="banner">
            <img src="../images/banner.jpg" id="banner">
            <br/>
        </div>

        <div id="navigation">
            <ul>
                <li><a href="home.html">Home</a></li>
                <li><a href="History.html">History</a></li>
                <li><a href="Houses.html">Houses</a></li>
                <li><a href="LocalBusiness.html">Local Business</a></li>
                <li><a href="events.html">Events</a></li>
                <li><a href="Contacts.html">Contacts</a></li>
            </ul>
        </div>

<div id="content">

<h2>Content Header 1 </h2>

<p>Awesome Content </p>

<h2>Content Header 2 </h2>

<p>Awesome Content </p>

</div>

    </body>
</div>
</html>

```