✔ Verzwicktes CSS Problem mit wrapper div

Status
Nicht offen für weitere Antworten.
Denniz

Denniz

Erfahrenes Mitglied
Hi Leute,
ich bau zur Zeit für einen Bekannten der ein Architektenbüro hat eine page.
Jetzt wollte ich ihm schon mal ein Muster präsentieren.
Also hab ich mir gedacht das ich die Grafiken ausseinanderschneide und dann in eine html datei packe damit er sich einen Eindruck verschaffen kann wie es im Browser aussieht.
Ja ok, jetzt zum Problem.
Ich habe einen wrapper, also eine hintergundgrafik die vertikal über den maincontent Bereich verlaufen soll und die dann genau am footer abschließen soll.
Die höhe des wrapper divs soll sich natürlich dynamisch an der wirklichen länge des contents anpassen.
Jetzt hab ich aber schon einen header div mit height=154px.
Darunter ist der wrapper div mit height=100%.
Das Ergebiss daraus ist das der footer div im Firefox in der luft hängt und im IE wird der footer zwar am unteren Broserfensterbereich gesetzt aber 154px zu tief.
Hab es schon versucht dem wrapper div mit margin-top:-154px nach oben zu
platzieren aber leider hats nicht funktioniert.
Bin mit meinen Kenntnissen am Ende.
Seht am besten selbst am besten im FF & IE.
Hier das resultat:
Mein CSS:
PHP: 
* {
margin:0px;
padding:0px;
}
html, body {
height:100%;
width:100%;
background:URL(_images/bg.jpg) repeat-y;
}
#container{
height:100%;
width:100%;
}
#headercontainer {
height:154px;
background:URL(_images/headercontainer.jpg) repeat-x;
width:100%;
}
#header{
width:759px;
height:154px;
background:URL(_images/header.jpg) no-repeat;
margin:0 auto;
}
#wrapper{
height:100%;
width:759px;
background:URL(_images/bgmain.jpg) repeat-y;
margin: 0 auto;
}
#maincontent {
width:759px;
height:408px;
background:URL(_images/maincontent1.jpg) no-repeat;
}
#footercontainer{
width:100%;
height:10px;
margin-top:-10px;
background:URL(_images/bg.jpg) repeat-y;
}
#footer {
margin:0 auto;
width:759px;
height:10px;
background:url(_images/footer.jpg) no-repeat;
}

Wie krieg ich das ding dazu das mein Footer wirklich am unteren Browserbereich bleibt und die wrapperlänge sich dynamisch an die jeweilige Auflösung anpasst?
 
Zuletzt bearbeitet:
Pack mal den Header in den Wrapper und notiere den Footer unterhalb (außerhalb) des Wrappers.

Hier der überarbeitete CSS- und HTML-Code:

Code: 
* {
margin:0px;
padding:0px;
}
html, body {
height:100%;
background: #e5e5e5 url(_images/headercontainer.jpg) repeat-x;
}
#wrapper{
min-height: 100%;
height: auto !important;
height:100%;
width:759px;
background:URL(_images/bgmain.jpg) repeat-y;
margin: 0 auto;
}
#header{
width:759px;
height:154px;
background:URL(_images/header.jpg) no-repeat;
}
#maincontent {
width:759px;
height:408px;
background:URL(_images/maincontent1.jpg) no-repeat;
}
#footercontainer{
width:100%;
height:10px;
margin-top:-10px;
overflow: hidden;
}
#footer {
margin:0 auto;
width:759px;
height:10px;
background:url(_images/footer.jpg) no-repeat;
}
HTML: 
<body>
<div id="wrapper">
  <div id="header"></div>
  <div id="maincontent"></div>
</div><!-- end wrapper -->
<div id="footercontainer">
  <div id="footer"></div>
</div>
</body>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück