100% Width Extends Beyond Page

I am working a website. And I'm having an issues. The website extends beyond the page. I have the header set to 100% width. I think it has to do with the character container I have. Is there anyway to deal with this? I can't change the innerwrapper to much, because it allows the character div to extend to the bottom of the content and page all of the time. This keeps anything from ever going over in the white area. Thanks in advanced.

http://172.31.0.246/~Paul/test/

index.html

<div id="wrapper">
<?=SITE_NAME?>
<div id="character"></div>
<div id="innerwrapper"> 
<div id="header">
This is header content.
</div>
<div id="content">
<p>This is content.</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
</div>
<div id="spacer1"> 
</div> 
</div> 
</div>

style.css

/* Global */
* {
	padding: 0em;
	margin: 0em;
}

html {
	width: 100%;
	height: 100%;
}

body {
	width: 100%;
	height: 100%;
	background: url('images/background.gif') repeat-y #E78700;
	font-family: tahoma, helvetica, sans-serif;
	font-size: 8pt;
	color: #492802;
}

#wrapper {
	width: 100%;
	height: 100%;
}

#innerwrapper {
	position: relative; /*** Let's be nice to IE ***/
	width: auto; /*** Content Width ***/
	display: table; /*** For non-IE browsers ***/
	height: 100%;
	width: 100%;
	margin-right: 219px;
}

#innerwrapper {
	height: auto;
	min-height: 100%;
}

#spacer1 {
	width: 100%;
	clear: both;
}

/* Common elements */


/* Layout (Every page) */
#character {
	width: 219px;
	height: 100%;
	min-height: 574px;
	background: url(images/character.png) no-repeat;
	float: left;
}

#header {
	width: 100%;
	min-width: 800px;
	height: 179px;
	background: url('images/header.gif') repeat-x;
}