Ich hab mal wieder probleme mit divs... Ich habe zZ diese Struktur:
div wrapper
div header
div primary links /
div banner /
/div header
div contentwrapper
div sidebar /
div text /
/div contentwrapper
div footer /
/div wrapper
Nun ist die länge des contents variabel aber immer min. 400px hoch
Nun soll der footer immer am ende stehen, auch wenn der text mal länger wird. Das Problem: Wenn der Text länger wird, steht der footer immer noch an der gleichen stelle (firebug debugged^^) und wird folglich nicht angezeigt, da der darüberliegende div (content) das verdeckt...
Hier mal mein gesamtes CSS:
div wrapper
div header
div primary links /
div banner /
/div header
div contentwrapper
div sidebar /
div text /
/div contentwrapper
div footer /
/div wrapper
Nun ist die länge des contents variabel aber immer min. 400px hoch
Nun soll der footer immer am ende stehen, auch wenn der text mal länger wird. Das Problem: Wenn der Text länger wird, steht der footer immer noch an der gleichen stelle (firebug debugged^^) und wird folglich nicht angezeigt, da der darüberliegende div (content) das verdeckt...
Hier mal mein gesamtes CSS:
Code:
@charset "utf-8";
/* CSS Document */
body {
background-color:#DEDEDE;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.wrapper {
position:absolute;
left:0px;
right:0px;
top:0px;
}
.primary {
background-color:#DEDEDE;
height:54px;
width:100%;
}
.primary .plinks {
font-size:14px;
color:black;
font-weight:bold;
padding-top:14px;
width: 950px;
margin: 0 auto;
}
.banner {
background-image:url(gfx/header.png);
background-repeat:no-repeat;
background-position:center;
background-color:#ffee00;
height:198px;
width:100%;
border-top:1px solid white;
border-bottom:1px solid white;
top:54px;
}
.contentwrapper {
color:black;
font-size:12px;
width:950px;
margin:0 auto;
}
.sidebar {
margin-top:20px;
border:5px solid #58bf8c;
width:217px;
min-height:400px;
background-color:white;
padding:4px;
}
.text {
margin-top:20px;
margin-left:260px;
border:5px solid #58bf8c;
background-color:white;
width:672px;
top:254px;
min-height:400px;
position:absolute;
padding:4px;
}
.footer {
bottom:10px;
margin: 0 auto;
text-align:center;
color:#6C6C6C;
}