Content staat raar

Me content staat nogal raar op http://paint-of-duty.nl/layouts/browser/
Me index.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl" xml:lang="nl">

<head>
 <title>Browsergame</title>
 <link rel="stylesheet" type="text/css" href="style.css" />
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
 
<body>
<div id="houder">
<div id="up"></div>
<div id="left"><div id="content-back">
        <div id="menu">
        <a href="#">- Home</a>
        <div id="content"></div>
        </div>
    </div></div><div id="down"></div>
</div>
</div>
</body>
</html>

Me css:

body{
    background-color:#000;
}
a {
font-family:Verdana; 
font-size:20pt; 
color:#162837; 
text-decoration: none;
}
#houder{
    width:1200px;
    margin-left:auto;
    margin-right:auto;
}
#up{
    background-image:url(images/up.gif);
    width:1200px;
    height:232px;
}
#left{
    background-image:url(images/left.gif);
    width:20px;
    height:812px;
}
#down{
    background-image:url(images/down.gif);
    width:1200px;
    height:156px;
}
#content-back{
    background-image:url(images/content-back.gif);
    width:1180px;
    height:812px;
    margin-left:20px;
    margin-right:20px;
}
#content{
    background-image:url(images/content.gif);
    position: relative;
    width:804px;
    height:740px;
    margin-left:300px;
    margin-right:300px;
}
#menu{
    background-image:url(images/menu.gif);
    position: relative;
    width:292px;
    height:740px;
    margin-left:38px;
    margin-right:38px;
}

het lijkt mij dat je beter eerst een vak maakt over je hele breedte en daarin een div met "left" en een div met "content" die beide divs geef je een een float: left; mee.

Kan je dat misschien inbouwen? want ik snap je niet helemaal
(is nu aan het kijken in jou CSS)

Ik zou je aan raden om opnieuw te gaan slicen, en dan .pngs en transperantie te gebruiken, dan is de code/opmaak netter!