Ich habe ein Problem mit meinem CSS Layout.
Zu leichteren Übersicht habe ich bunte Farben genommen.
Dem Wrapper habe ich einen Rahmen gegeben um zu sehen was ich meine.
Ich möchte dass außerhalb von diesem Rahmen der Background geändert werden kann ohne dass die Header Sidebar und die überschrift davon abhängig sind. Wie ihr seht ändert sich auch der Inhalt vom Wrapper.
WICHTIG ist, dass der Footer unten bleibt.
Das Menü soll runter bis zum Footer gehn und der Content soll genauso runter bis zum Footer. Leider habe ich das bisher nicht geschafft. Bitte um Hilfe 
Danke
CSS
* {
margin: 0;
padding: 0;
background-color: pink;
}
html,body {
height: 100%;
font-size: 100%;
font-family: Verdana;
word-spacing: 2px;
}
#wrapper {
position: relative;
min-height: 100%;
background: green;
width: 1100px;
margin: 0 auto;
border: 1px solid #4b0e50;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 1px;
}
* html #wrapper {
height: 100%;
}
#content {
padding: 1em 1em 2.5em 1em;
background-color: white;
padding-left: 230px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
line-height: 1.5em;
text-align: center;
background: #9ddbf3;
}
#header {
background-image: url("img/header_new.png"); /*lila #d8d0f5 */
text-align: center;
height: 200px;
padding: 40px;
background-color:#14529a;
background-position: center;
background-repeat: no-repeat;
}
/* Header Sidebar ... -------------------------------------------*/
#header-sidebar{
background-color: 8a75b6;
height: 30px;
padding-left: 130px;
font-size: 100%;
margin-top: 10px;
margin-bottom: 10px;
list-style: none;
color: #ffffff;
letter-spacing: 2px;
font-family: Arial Black;
}
#header-sidebar a{
color: black;
}
#header-sidebar a:visited{
color: #4b0e50;
}
/* ----------------------------------- HEADER TEIL - ENDE ------------------------- */
#menu {
width: 150px;
float: left;
padding-left: 15px;
padding-top: 20px;
background: yellow;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #44156E;
}
#menu a:hover {
color: #6F7D94;
}
/*---------------------------------------------------------------------------*/
#nav{
list-style:none;
font-weight:bold;
margin-bottom:10px;
float:left; /* Clear floats */
width:100%;
/* Bring the nav above everything else--uncomment if needed.
position:relative;
z-index:5;
*/
}
#nav li{
float:left;
margin-right:10px;
position:relative;
padding-left:3em /* der Abstand zwischen den Links */
}
#nav a{
display:block;
padding:5px;
color:#ffffff;
background:8a75b6;
text-decoration:none;
letter-spacing: 2px;
font-family: Arial Black;
}
#nav a:hover{
color:#000;
background:#f2e1f8;
text-decoration:underline;
}
/*--- DROPDOWN ---*/
#nav ul{
background:8a75b6; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
/*background:rgba(255,255,255,0); But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
list-style:none;
position:absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav ul li{
padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
float:none;
}
#nav ul a{
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
left:0; /* Bring back on-screen when needed */
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
background:#fff;
text-decoration:underline;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
text-decoration:none;
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
background:#f2e1f8;
}HTML
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Magical Girls</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
HEADER
</div>
<div id="header-sidebar">
<ul id="nav">
<li>
<a href="index.php">test</a>
</li>
<li>
<a href="#">test</a>
</li>
<li>
<a href="#">test</a>
</li>
<li>
<a href="#">test</a>
</li>
<li>
</li>
</ul>
</div>
<div id="menu">
MENÜ
</div>
<div id="content">
Das beste für mich<br>
Das beste für mich<br>
Das beste für mich<br>
Das beste für mich<br>
Das beste für mich<br>
Das beste für mich<br>
Das beste für mich<br>
<h2>Willkommen auf meiner Homepage :)</h2><br>
<p></p>
</div><!--Ende #content-->
<div id="footer">
FOOTER
</div><!--Ende #footer-->
</div><!--Ende #wrapper-->
</body>
</html>