Probleme de mise en page avec CSS

Bonjour,

voila voici une page web de mon site :

http://allinklub.ifrance.com/test.html

voila je n'arrive pas a incorporer mon "tableau de points de championnat" (qui est une image jpg) dans le cadre gris qui est derriere, en fait je voudrais mettre cette image a l interieur du carde gris et pouvoir placer le tout soit au milieu de la page soit sur la gauche....

voici ma feuille de style :

body {
background-image:url(images/background.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px;
text-align: center;
padding: 0px;
background-repeat: repeat-x;
background-color: #000000;
}
* {margin: 0px;padding: 0px;}
p {
padding: 10px 10px 10px 20px;
display:block;
color:#525757;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold
}
a {
color:#6b7272;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
}
#container {
margin: 0px auto;
text-align: left;
width: 860px;
}
#header{
height:304px;
width:777px;
background-image:url(images/header.jpg);
background-repeat: no-repeat;
}
#content{
}
#left{
width:192px;
float:left;
}
#middle{
margin-left:206px;
margin-right:196px;
width:450px;
}
#right{
width:192px;
float:right;
}

/********************* menu ****************************/
.menuheader{
width:192px;
height:37px;
background-image:url(images/menutop.gif);
display:block;
}
.menucontent{
width:192px;
background-image:url(images/menumiddle.gif);
padding-top:10px;
background-repeat: repeat-y;
}.menuheader h3{
padding: 10px 0px 0px 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
}
.menufooter{
width:192px;
height:15px;
background-image:url(images/menubottom.gif);
display:block;
}
.postheader,.menuheader{
color:#CCCCCC;
text-transform: uppercase;
}
/********************* post ****************************/
.post{
margin-bottom:15px;
}
.postheader{
background-image:url(images/posttop.gif);
display:block;
width:450px;
height:33px;
}
.postheader h1{
padding: 7px 0px 0px 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
}

.postcontent{
background-image:url(images/postmiddle.gif);
background-repeat: repeat-y;
padding: 20px 0px;
}
.postfooter{
background-image:url(images/postbottom.gif);
background-repeat: no-repeat;
display:block;
width:450px;
height:15px;
}
/********************* header ****************************/
#header{
position:relative;
}
#header ul{
position:absolute;
top:273px;
display:block;
left:190px;
}
#header ul li{
display:inline;
text-align:center;
margin:auto;
width:auto;
border-right: 1px solid #6b7272;
}
.last{
border-right: 0px none #6b7272 !important;
}
#header ul li a{
display:inline;
text-align:center;
text-decoration:none;
padding: 0px 10px;
text-transform: uppercase;
}
#header ul li a:hover{
text-decoration:underline;
}
/********************* footer ****************************/
#footer{
width:850px;
}
#footer ul{
display:block;
margin-left:190px;
}
#footer ul li{
display:inline;
text-align:center;
margin:auto;
width:auto;
border-right: 1px solid #6b7272;
}

#footer ul li a{
display:inline;
text-align:center;
text-decoration:none;
padding: 0px 10px;
text-transform: uppercase;
}
#footer ul li a:hover{
text-decoration:underline;
}
#footer span{
color:#525757;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-align:center;
width:850px;
display:block;
padding: 15px 0px;
}
/********************* menu members ****************************/
.menu ul{
list-style-position: inside;
list-style-type: disc;
padding: 0px 0px 0px 20px;
color:#666666;
}
.menu ul li{
padding-top: 5px;
color:#666666;
}
.menu ul li a{
text-decoration:none;
padding: 0px;
text-transform: uppercase;
}
.menu ul li a:hover{
text-decoration:underline;
text-transform: uppercase;
}
.member{
display:inline;
float:left;
margin-left:10px;
}
.member span{
display:block;
text-align:center;
padding: 2px 0px 13px 0px;
text-transform: uppercase;

}
.member img{
width:75px;
height:70px;
border: solid 2px #999999;

}
.clear{
clear:both;
}