Right i have a design that i just can't get right.

link to my design http://www.nelcode.co.uk



The problems are:

The side and middle part just can't get to meet up and tried a few things but cant work right.

CSS code:

/* CSS Document */

* {
	margin:0;
	padding:0;
}


body {
	background-color: #666666;
}

#wrapper {
	width:530px;
	margin: 50px auto;
}

#header {
	width:530px;
	height:90px;
	background-color:#fff;
	border-bottom-style:solid;
	border-bottom-width:1px;
}

#logo {
	background-image:url(logo.jpg);
	background-repeat:no-repeat;
	width:80px;
	height:80px;
	margin: 5px 0px 0px 0px;
}

#nav {
	float:right;
	list-style:none;
	margin: -15px 0px 0px 0px;
	color:#000;
	font-size:10px;
	font-family: Verdana, Arial, sans-serif;
}

#nav li {
	display:inline;
	padding:0px 5px 0px 5px;
}
#nav a {
	text-decoration:none;
	color:#000;
}

#nav a:hover {
	color:#ff0000;

}
#main {
	width:530px;
	height:255px;
	background-color:#fff;
}

#boxes li {
	float:left;
	list-style:none;
	width:103px;
	height:95px;
}

#boxes1 {
	background-image:url(boxes1.jpg);
	background-repeat:no-repeat;
}

#boxes2 {
	background-image:url(boxes2.jpg);
	background-repeat:no-repeat;
}

#boxes3 {
	background-image:url(boxes3.jpg);
	background-repeat:no-repeat;	
}

#sideleft {
	position:absolute;
	left: 162px;
	top: 39px;
	background-image:url(left.jpg);
	background-repeat:no-repeat;
	width:25px;
	height:386px;
	float:left;
}

#sideright {
	position:absolute;
	right: 282px;
	top: 39px;
	background-image:url(right.jpg);
	background-repeat:no-repeat;
	width:25px;
	height:376px;
	float:right;
}

#splash {
	background-image:url(splash.jpg);
	width:294px;
	height:138px;
	float:left;
	margin-top:-131px;

}

#content {
	float:left;
	width:200px;
	height:216px;
	font-family: Verdana, Arial, sans-serif;
	font-size:10px;
	background-color:#fff;
	margin-top:10px;

}


#footer {
	position:absolute;
	right: 307px;
	top: 396px;
	height: 37px;
	width:530px;
	background-image:url(bottom.jpg);
	background-repeat:no-repeat;
	float:right;
}


h1 {
	font-family: Verdana, Arial, sans-serif;
	font-size:14px;
}

h2 {
	font-family: Verdana, Arial, sans-serif;
	font-size:12px;
	margin:5px 0px 0px 10px;
	

}
#content li {
	display:inline;
	margin:5px 0px 0px 20px;
}

Any help would be great.

Ok had some luck it all looks fine now (well almost) but i now have the problem of it's not always in the center, it change as i change the screen res is there away to stop it changing so looking the same in most screen res.

New CSS code:

/* CSS Document */

* {
	margin:0;
	padding:0;
}


body {
	background-color: #666666;
}

#wrapper {
	width:530px;
	margin: 50px auto;
}

#header {
	position:absolute;
	left: 250px;
	width:530px;
	height:90px;
	background-color:#fff;
	border-bottom-style:solid;
	border-bottom-width:1px;
}

#logo {
	background-image:url(logo.jpg);
	background-repeat:no-repeat;
	width:80px;
	height:80px;
	margin: 5px 0px 0px 0px;
}

#nav {
	float:right;
	list-style:none;
	margin: -15px 0px 0px 0px;
	color:#000;
	font-size:10px;
	font-family: Verdana, Arial, sans-serif;
}

#nav li {
	display:inline;
	padding:0px 5px 0px 5px;
}
#nav a {
	text-decoration:none;
	color:#000;
}

#nav a:hover {
	color:#ff0000;

}
#main {
	position:absolute;
	left: 250px;
	top: 141px;
	width:530px;
	height:255px;
	background-color:#fff;
}

#boxes li {
	float:left;
	list-style:none;
	width:103px;
	height:95px;
}

#boxes1 {
	background-image:url(boxes1.jpg);
	background-repeat:no-repeat;
}

#boxes2 {
	background-image:url(boxes2.jpg);
	background-repeat:no-repeat;
}

#boxes3 {
	background-image:url(boxes3.jpg);
	background-repeat:no-repeat;	
}

#sideleft {
	position:absolute;
	left: 225px;
	top: 39px;
	background-image:url(left.jpg);
	background-repeat:no-repeat;
	width:25px;
	height:386px;
	float:left;
}

#sideright {
	position:absolute;
	left: 780px;
	top: 39px;
	background-image:url(right.jpg);
	background-repeat:no-repeat;
	width:25px;
	height:376px;
	float:right;
}

#splash {
	background-image:url(splash.jpg);
	width:294px;
	height:138px;
	float:left;
	margin-top:-131px;

}

#content {
	float:left;
	width:200px;
	height:216px;
	font-family: Verdana, Arial, sans-serif;
	font-size:10px;
	background-color:#fff;
	margin-top:10px;

}


#footer {
	position:absolute;
	left: 250px;
	top: 396px;
	height: 37px;
	width:530px;
	background-image:url(bottom.jpg);
	background-repeat:no-repeat;
	float:right;
}


h1 {
	font-family: Verdana, Arial, sans-serif;
	font-size:14px;
}

h2 {
	font-family: Verdana, Arial, sans-serif;
	font-size:12px;
	margin:5px 0px 0px 10px;
	

}
#content li {
	display:inline;
	margin:5px 0px 0px 20px;
}

Thanks

did you put that box in a div?

what box would that be.

Get rid of all that position:absolute and your site will center the way you want it to. All that positioning is simply NOT necessary, and is not a good way to go. Learn to use the normal document flow to your advantage, along with floats, and you'll be better off.

Thats what i tried with the 1st css at the top, but could never get the left, right and bottom image ti line up with the rest of the site.

Hope you understand

It doesn't appear that you CLEARED those floats, and you must do that:
http://css-discuss.incutio.com/?page=ClearingSpace

Got it sorted looks better now thanks for pointing me in the right way.