[CSS] Div-Layout "verrutscht" | Gegen Bilderklau

+Debbie+

Ich habe mich mal daran versucht ein Div-Layout zu coden, hat sogar ganz gut geklappt nur das es irgendwie verrutscht aussieht, da ich mich nicht damit auskenne weiß ich leider nicht was falsch ist. So sieht es zur Zeit aus ...

design.html

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:

<html>
<head>
<title>Gestüt Maienfeld</title>

<!---CCS STYLESHEET-->
<link href="design.css" rel="stylesheet">
</head>
<body>

<!---LAYOUT-->
<div id="layout">

<!---CONTENT-->
<div id="content">
TEXT & INHALT & SO

</div>

<!---NAVIGATION-->
<div id="navigation">
MENÜ<br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
NAVI & SO
</div>


</body></div>
</html>

design.css

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:

body {
overflow-x:hidden;
background:url('http://appledings.bplaced.de/Gestuet/Grafiken/design_neu_bg.png');
font-family:Verdana;
font-size: 8pt;
} 

#layout {

margin-top: 0px;
margin-left: 0px;
width: 1000px;
height: 600px;
position: absolute;
background:url(http://appledings.bplaced.de/Gestuet/Grafiken/design_neu.png) no-repeat;
}

#content {
width: 700px;
margin-top: 226px;
margin-left: 241px;
position: absolute;
}

#navigation {
width: 205px;
margin-top: 40px;
margin-left: 6px;
position: absolute;
}

Und wie kann man verhindern das sich das Design am Rand auch wiederholt?
Währe dankbar für Hilfe großes Grinsen

LG Debbie