Hallo
Das Thema ist schon so alt wie CSS, aber nichts, was ich im Internet hierzu habe finden können, funktioniert bei mir richtig. Wo mache ich einen Fehler?
Ich möchte die folgende Seite bauen:

Hinweise:
1. Der gelbe "Rand" soll sich links und rechts bis zum Bildschirmrand erstrecken
2. Wir reden hier also über ein Hintergrundbild, das (wohl im body-tag) per repeat-x wiederholt angezeigt wird.
3. Der eigentliche Inhalt soll in der zentrierten Spalte stehen
4. Diese Spalte muss immer 100% Höhe haben, wobei auch dessen Hintergrund dargestellt werden muss. (Derzeit ist das ein GIF mit 1 Pixel Höhe und 861 Pixel Breite, das per repeat-y die gesamte content-area ausfüllt)
Aber es gelingt mir nie, diese Aufgabe cross-browser-kompatibel umzusetzen. Hier mein Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Gospeltribe</title>
<link rel="stylesheet" href="./css/template.css" type="text/css">
</head>
<body>
<div id="wrapper" align="center">
<div id="center-column">
<div id="banner">
</div>
<div id="menu"> Hier kommt ein Menü hin
</div>
<div id="content"> Hier kommen ganz tolle Inhalte hin
</div>
</div>
</div>
<div id="footer"> Hier kommen weitere tolle Sachen hin
</div>
</body>
</html>
html, body {
margin: 0;
padding: 0;
height: 100%;
text-align: left;
background-image:url(../images/background.jpg);
}
#wrapper {
height:100%;
}
#center-column {
height:100%;
background-image:url(../images/body_fill.gif);
background-repeat:repeat-y;
}
#banner {
width:861px;
height:278px;
background-image:url(../images/banner.jpg);
}
#menu {
width:861px;
height:26px;
background-image:url(../images/menu_fill.gif);
background-repeat:repeat-x;
text-align:left;
color:white;
}
#content {
width:861px;
min-height:700px;
background-image:url(../images/body_ background.gif);
background-repeat:no-repeat;
padding:75px;
text-align:left;
}
#footer {
width:100%;
height:26px;
position:fixed;
bottom:0px;
background-image:url(../images/menu_fill.gif);
background-repeat:repeat-x;
color:white;
}
Bei mir sieht diese Nummer nun so aus:

Ich habe schon diverse Tips aus dem www ausprobiert - aber nichts funktioniert wirklich. Ich wäre Euch wirklich extrem dankbar, wenn Ihr mir dabei helfen könntet.
Wenn ihr mit o.g. Code etwas spielen möchtet, findet ihr hier die zugehörigen images:
Ganz herzlichen Dank
Matze