I designed a site with all images so far that i wanted.

I tried using css for fonts and to keep my site 800x600 and centred if any1 is using bigger resolution,

However 2 parts of my site are not confined to the 800x600 area and are outside it, Im unable to position them!

Can someone help me out? I t would be much appreciated!

Ok as you can see theres an image on the left which should be more to the right, and the image on right is messed up to and outside 800x600 box, To position them there i had to enter in minus integers aswell, you can see it in the code! If sumone could have a go at fixing this up i would be grateful!

Heres the site!
http://www.hardstylenation.net/rot/index.htm

and the code is

/* CSS Document */
body {
height:auto;
background-color:#000000;
position:absolute;
top:0;
left:0;
margin:0;
}


#container {
width:800px;
height: 750px;
background-color:#181f1f;
margin:auto;
}

#header {
height: 230px;
width:100%;
background-color:#181f1f;
position:relative;
bottom:0;
right:0;
border-bottom:solid 2px #000000;
}

#left {
width:249px;
height:380 px;
margin-top:-500px;
border-right:1px solid #000000;
float:left;
background-color:#181f1f;
background-attachment:scroll;
margin-bottom:0;
border-bottom:0px solid #000000;
}

#right {
float:right;
clear:right;
width:500px;
height:350px;
margin-top:-500px;
margin-right:50px;
background-color:#14191a;
margin-bottom:0;
border-bottom:0px solid #000000;
}

#backbot {
height:200px;
}

h3.title {
color:#ffffff;
margin:0px;
margin-left:20px;
margin-right:20px;
border-bottom:1px solid #000000;
}

h5.content {
margin-left:20px;
margin-right:20px;
color:#3e8074;
font-size:18px;
font-weight:normal;
margin-top:10px;
}

.sun {
position:absolute;
top:0;
left:0;
}

.foottext {
margin-top:10px;
margin-left:20px;
width:300px;
float:left;
clear:both;
font-size:14px;
}

.val {
clear:right;
float:right;
width:80px;
margin-top:10px;
margin-bottom:0px;
}
a {
color:#000000;
text-decoration:none;
}
a:hover {
color:#f0eae8;
text-decoration:underline;

First of all, get rid of the position:absolute on the body, it's completely unnecessary - and useless. For IE to center, put text-align: center on the body.

Set #container to position:relative and the positioning on the #header should be completely unnecessary. Also add text-align: left; to #container to re-set the text alignment inside #container.

#Foot and #blackbott are outside the #container which has the 800px defined width, so of course they're going to be 'outside'.

You also need to clear your floats properly, putting float:left and clear:both on the element itself usually does NOT work.

Thanks for that! Could you have a look at my code and stuff now?

Its centred etc in firefox but not in IE! its nmy 1st time doin css so m not so sure!

You need to put a proper DOCTYPE on your pages or nothing is going to work right.

Originally Posted by LadynRed

You need to put a proper DOCTYPE on your pages or nothing is going to work right.

That worked.
Thanks alot for the help!