Design extensible avec bordures

Bonjour à vous,
Je me tourne vers votre science face à un problème de mise en page CSS.
Je désire faire un design extensible.
J'ai donc un container général dans lequel j'affiche mes données.
Sauf qu'à l'intérieur, je souhaite subdiviser en 3 parties en float:left, une marge de gauche avec une image de fond de 50px de largeur, un contenu et une marge de droite avec une autre image de fond de 50px.
Sauf que mon image ne s'affiche pâs !!!
Voici le code 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
 
<!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">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> </title>
    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />
 
 
</head>
<body>
<div id="container">
    <div id="design_left"></div>
    <div id="design_content">
 
 
    </div>
    <div id="design_right"></div>
</div>
<div id="footer">
    <img src="/img/logo_gea.JPG" border="0"><br />&copy; 2009
</div>
</body>
</html>

et le 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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
html {
    margin: 0;
    margin-top: -10px;
    padding: 0;
    font-family: Verdana;
    font-size: small;
}
 
body {
    width: 100%;
    background-color: #9eacba;
    background-image: url('../img/top_back.png') ;
    background-position: top;
    background-repeat: repeat-x;
}
 
#container {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}
 
#design_left {
    float:left;
    width: 50px;
    background-image: url('../img/design_left.png') ;
    background-repeat: repeat-y;
}
 
#design_content {
    float: left;
    background-color: #ffffff;
}
 
#design_right {
    float: left;
    width: 50px;
    background-image: url('../img/design_left.png') ;
    background-repeat: repeat-y;
}
 
#footer {
    clear: both;
    padding-top: 20px;
    padding-bottom: 20px;
    margin: auto;
    width: 80% ;
    text-align: center;
    background-color: #ffffff;
}

Merci pour votre aide !