html, body {
height: 100%; /* wichtig */
margin:0px;
padding:0px;
background-color:#FFC;
}

#outer_wrapper {
min-width:740px;
width:100%;
}

#wrapper {

}

#header {
border:1px;
width:100%;
/* the above declaration creates an horizontal scroll bar in IE, this is to get rid of it */
margin:0 -1px;
height:150px;
}

#container {
float:left;
width:100%;
display:inline;
margin-left:-200px;

}

#left {
float:left;
width:150px;
display:inline;
margin-left:200px;
}

#main {
/* the width from #left (150px) + the negative margin from #container (200px) */
margin-left:350px;
background-color:#FFF;
}
/* good to know: if #sidebar is to be shorter than #main, then there is no need for this rule */
#sidebar {
/* this is to keep the content of #sidebar to the right of #main even if the content of "main is shorter */
padding-left:100%;
/* this is to "bring back" the #sidebar that has been moved out of the viewport because of the padding value */
margin-left:-200px;
}

#sidebar p {
    text-align:center;
}

#footer {
position: absolute;
/* see #outer_wrapper  */
width:100%;
/* this is to clear #container */
clear:both;
border-top:1px;
border-bottom:1px;
bottom: 0; /* wichtig */
}
/* this is the class that is applied to 2 structural hacks in the markup. The first "meaningless" element is used to clear #left in NN6 and the last one is used to clear #container in NN4 */
.clearing {height:0;clear:both}

min-height: 100%;
height:auto !important; /* moderne Browser */
height:100%; /* IE */
position: relative;