Trouble With 3 Column Layout in IE and Firefox

Site in question: https://dirtydalerz.com/test/

Its my test environment. I’m trying to set up my theme to look like the current theme at (https://dirtydalerz.com/) but this time with my own custom theme without all the spare BS I removed from the theme i customized it from.

The problem I am running into is when viewing the site in Firefox it looks perfect. When I view the site in IE it screws up the middle content and the left sidebar. Putting the left sidebar within the content div. There has to be something i am overlooking.

Here is the exact stylesheet:

/*
Theme Name: DirtyDalerz.com-WP-Test
Theme URI: https://dirtydalerz.com
Description: Test Environment for DirtyDalerz.com
Author: Brian Cinelli
Author URI: https://zooyorkfreak.com
Version: 1
*/

body {
     	/* background: #006600; */
     	background-image: url('https://dirtydalerz.com/site/bg.jpg');
	margin: 0;
	padding: 0;
	}

#container {
     	width: 1000px;
        margin: 0 auto;
	background: orange;
     	border-left: 1px solid yellow;
     	border-right: 1px solid white;
     	border-bottom: 3px solid yellow;
     	}

#banner {
	position: relative;
	height: 150px;
     	background: black;
	background-image: url('https://dirtydalerz.com/images/site/topbannerdd.jpg');
	background-repeat: no-repeat;
	background-position: center;
	}

#sidebar-left {
	background: green;
 	width: 200px;
        margin-left: -1000px;
 	float: left;
	}

#content {
	background: #FF00CC;
	width: 600px;
        margin: 0 200px 0 200px;
        float: left;
	}

#contentwrapper{
        width: 100%;
        float: left;
}

#sidebar-right {
	background: purple;
	width: 200px;
        margin-left: -200px;
	float: left;
	}

/* Post-Content Elements */

p       {
        font-size: 13px;
        font-family: "Calibri", sans-serif;
	font-weight: normal;
        text-align: justify;
	color: #CCCCCC;
	margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
        padding-top: 4px;
        padding-bottom: 6px;
        padding-left: 10px;
        padding-right: 10px;
	}

.time {
       color: green;
       font-size: 12px;
       text-align: right;
}

.title-post {
       color: green;
       font-size: 20px;
       text-align: Left;
}

.post {
 	margin: 10px 5px 20px 5px;
 	padding: 5px;
 	background: #000000;
 	border: 1px dashed #006600;
	}

.post-author {
       color: green;
       font-size: 12px;
       text-align: left;
}

.feedback {
       color: green;
       font-size: 12px;
       text-align: right;
}

/* Post-Content Elements End */

/* Footer Elements */
#footer {
        width: 1000px;
	margin: auto;
        background: black;
        clear: left;
}

p.footer {
        text-align: center;
}

Simply put, I am trying to have my header, left sidebar, content, right sidebar, footer appear in the right order. Please help.