Resizing and centering my site in IE?

[gumbald]

Another thread, for another silly little niggle I've found...

When I resize the window, my site goes funny in IE, but not in FF. Guessing this is a CSS problem, I can't seem to find a definitive solution though.

Can anybody point me in the right direction?

http://gumbald.co.uk

EDIT: I've managed to fix it, IE seems to have a problem with the width being defined in the body rather than the wrap. It's messed my colours up now though, should be easier to sort though.

 

[gumbald]

The width is fixed at 640px...

I've now got an issue with the colours, can anybody work out where the small border at the top of my page is coming from?

html {
	height: 100%;
	overflow: -moz-scrollbars-vertical;
	background-color: #111;
}

* html #wrap {
	height: 100%;
}

#wrap a:link {
	color: #0054A6;
	text-decoration: none;
}     
#wrap  a:visited {
	color: #0054A6;
	text-decoration: none;
}  
#wrap  a:hover {
	color: #828282;
	text-decoration: none;
}   
#wrap  a:active {
	color: #000000;
	text-decoration: none;
}   

body {
	font: 65% 'trebuchet ms', arial, helvetica, sans-serif;
	min-height: 100%;
}

h1 {
	font: 300% 'trebuchet ms', Arial, Helvetica, sans-serif;
	color: #00f;
	margin: 0;
}

h2 {
	font: 130% 'trebuchet ms', Arial, Helvetica, sans-serif;
	padding-top: 3px;
}

.imgLeft {
	float: left;
	padding-right: 10px;
	margin-top: 0px;
}
.imgRight {
	float: right;
	padding-left: 10px;
	margin-top: 0px;
}

#wrap {
  position: relative;
	min-height: 100%;
	width: 640px;
  margin: auto;
	border: 1px solid red;
}

#headwrap {
}

#logo {
  text-indent: 10px;
	width: 100%;
	height: 42px;
	background: #BBF repeat center;
	text-align: left;
}

#navbar {
  text-indent: 10px;
  width: 100%;
	font: 110% 'trebuchet ms', Arial, Helvetica, sans-serif;
	margin: auto;
	height: 16px;
	padding-top: 2px;
	color: #000;	
	text-align: left;
	background: #DCDCDC repeat-x;
	border-bottom: 1px solid #ccc;
}

#navbar li {
	display: inline;
	padding-right: 10px;
	margin: 0;
}

#navbar ul {
	padding: 0;
	margin: 0;
}

#mainwrap {
}

#mainwrap:after {
	display: block;
	clear: both;
}

#content {
	position: relative;
	padding: 16px;
	text-align: justify;
	background-color: #FFF;
}

I want the outside borders of the page to be a certain colour, and the middle section (content) to be white right to the bottom of the page. Setting "min-height: 100%" has stopped working since I made the changes to get IE working

EDIT: tidier CSS code, still no idea where the top border is coming from, or why the white box isn't down to the bottom of the page.

 

[gumbald]

OP original layout was most likely caused from using minus numbers for margins and left:50%

I did try that, but it was no different to using "margin: auto".

Any thoughts as to where the brown border at the top is from?