CSS - Sticky footer komt onder container div

[The.Terminator]

Ik heb een sticky footer gemaakt in CSS, dit werkt perfect bij andere sites die ik heb gemaakt.
Nu heb ik een andere site waar het niet werkt, enigste verschil is dat de container hier een background image heeft die naar beneden repeat

CSS :

Cascading Stylesheet:

html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;

    background-image: url(../images/background_repeater.png);
    background-position: 0px 0px;
    background-repeat: repeat-x;
    background-color: #ebecec;
    color: #52463f;
    
    height: 100%;
}

.container {
    position: relative;
    width: 1000px;
    margin: 0 auto;
    height: auto !important; /* ie6 ignores !important, so this will be overridden below */
    min-height: 100%; /* ie6 ignores min-height completely */
    height: 100%;
    
    background-image: url(../images/background_container_repeater.png);
    background-position: 0px 0px;
    background-repeat: repeat-y;
    
    margin-bottom: -66px; /* hoogte footer */   
}

.footer {
    width: 100%;
    height: 66px;
    clear: both;
    background-color: #dadbdb;  
}

HTML:

<div class="container">
        <div class="header">
            IETS[s][/s]
        </div>
<div>
Content
</div>
    </div>
    <div class="footer"></div>

Ik zie meerdere oplossingen in Google (clear floats), maar dit werkt niet ...

[ Voor 6% gewijzigd door The.Terminator op 02-12-2011 11:01 ]

[RM-rf]

body moet volgens mij geen height: 100% hebben maare en min-height: 100% als je wilt dat de pagina ook verder scollen kan, en de achtergrond dan ook doorloopt op dat deel onder de viewport

met 'height: 100%' maak je een element exact zo groot als de viewport, maar dan houd hij ook op.

[ Voor 21% gewijzigd door RM-rf op 02-12-2011 10:58 ]

[418O2]

wat moeten wij hier nu mee? Fix eerst je code tags, laat je html structuur eens zien... Plaats eventueel een link naar de pagina.

daarbij; waarom heeft die container een position:relative?

[The.Terminator]

RM-rf schreef op vrijdag 02 december 2011 @ 10:57:
body moet volgens mij geen height: 100% hebben maare en min-height: 100% als je wilt dat de pagina ook verder scollen kan, en de achtergrond dan ook doorloopt op dat deel onder de viewport

met 'height: 100%' maak je een element exact zo groot als de viewport, maar dan houd hij ook op.

Nu staat de footer niet meer als sticky onderaan

EDIT :

Zet ik body weer op height: 100% en haal ik position: relative; van de container, dan staat deze wel goed.

418O2 schreef op vrijdag 02 december 2011 @ 10:59:
wat moeten wij hier nu mee? Fix eerst je code tags, laat je html structuur eens zien... Plaats eventueel een link naar de pagina.

daarbij; waarom heeft die container een position:relative?

Pagina is niet online (test), html bijgevoegd.

[ Voor 6% gewijzigd door The.Terminator op 02-12-2011 11:04 ]

[418O2]

wat bedoel je met sticky? hij moet onderaan de container komen?

je container schaalt nu niet (omdat hij niet float), je moet hem even wrappen.

HTML:

<div class="wrapper">
     <div class="content"> 
        <div class="header"> 
            IETS[s][/s] 
        </div> 
        Content 
   </div>
    <div class="footer"></div>
<div>

Cascading Stylesheet:

.wrapper { width:1000px; margin:0 auto; }
.content{ width:1000px;float:left; }

edit: iets beter gemaakt

[ Voor 9% gewijzigd door 418O2 op 02-12-2011 11:19 ]

[RobIII]

Cascading Stylesheet:

.footer { 
    position:fixed;
    bottom:0;
}

[The.Terminator]

RobIII schreef op vrijdag 02 december 2011 @ 11:22:

Cascading Stylesheet:

.footer { 
    position:fixed;
    bottom:0;
}

Hij blijft netjes aan de onderkant, alleen wanneer de tekst aan de onderkant wegvalt, moet de footer meeschuiven naar beneden.

[418O2]

dan moet je mijn optie gebruiken en de container een min-height van 100% geven en de footer absoluut aan de onderkant van de container positioneren

[The.Terminator]

418O2 schreef op vrijdag 02 december 2011 @ 12:33:
dan moet je mijn optie gebruiken en de container een min-height van 100% geven en de footer absoluut aan de onderkant van de container positioneren

Dank voor je antwoord. Het werkt met uitzondering dat de footer over de gehele breedte moet en niet in de wrapper van 1000px; (en gooi ik hem er buiten dan werkt het weer niet).
Even verder puzzelen

[OkkE]

The.Terminator schreef op vrijdag 02 december 2011 @ 12:57:
[...]


Dank voor je antwoord. Het werkt met uitzondering dat de footer over de gehele breedte moet en niet in de wrapper van 1000px; (en gooi ik hem er buiten dan werkt het weer niet).
Even verder puzzelen

Waarom is ook .wrapper 1000px? Zorg voor een element wat 100% breed is, waar je footer in staat.

[The.Terminator]

OkkE schreef op vrijdag 02 december 2011 @ 13:07:
[...]

Waarom is ook .wrapper 1000px? Zorg voor een element wat 100% breed is, waar je footer in staat.

Dat deed ik ook, 100%, maar dan stond de container weer niet in het midden.
Maar heb nu een code die lijkt te werken (iig in FF, Safari en IE)

Cascading Stylesheet:

* {
    margin: 0px; padding: 0px;
}

html { height: 100%; }

body {
    height: 100%;
    background-image: url(../images/background_repeater.png);
    background-position: 0px 0px;
    background-repeat: repeat-x;
    background-color: #ebecec;
    color: #52463f;
}

#container {
    margin: 0 auto;
    width: 1000px;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin-bottom: -25px; /* hoogte footer */
    
    background-image: url(../images/background_container_repeater.png);
    background-position: 0px 0px;
    background-repeat: repeat-y;
}

#spacer {
    display: block !important;
    height: 25px; /* hoogte footer */
}

#footer {
    clear: both;
    height: 25px; /* hoogte footer */
    background: #dadbdb;
}

HTML:

<div id="container">
        <div class="header">

</div>
        
        CONTENT<br /><br />
        CONTENT<br /><br />
        CONTENT<br /><br />
        CONTENT<br /><br />
        CONTENT<br /><br />
        CONTENT<br /><br />
        CONTENT<br /><br />
        CONTENT<br /><br />
        CONTENT<br /><br />
        CONTENT<br /><br />
        CONTENT<br /><br />
        CONTENT<br /><br />
        CONTENT<br /><br />
        CONTENT<br /><br />
        CONTENT<br /><br />
        CONTENT<br /><br />
        CONTENT<br /><br />
        
        <div id="spacer"></div>
    </div>
    <div id="footer">
        <p>Footer tekst</p>
    </div>

[418O2]

Ga maar even wat tutorials lezen... Er staan namelijk een aantal dingen in je code die echt kant noch wal raken..

hoogte, margin en padding op je html (en body)?
verkeerd uitgevoerde minheighthack
marginbottom omdat je hem 25px van wat wil krijgen precies?
Die spacer heeft geen breedte, dus dat werkt niet.

etc. etc.

[ Voor 34% gewijzigd door 418O2 op 02-12-2011 13:21 ]

[The.Terminator]

dat gaan we sowieso doen.
Maar ik lees dat sommige browsers een stukje ruimte tussen body en container div laten.

Ik knutsel iig wel eem verder

[ Voor 43% gewijzigd door The.Terminator op 02-12-2011 13:30 ]

[418O2]

gebruik dan een resetstylesheet

[mindcrash]

418O2 schreef op vrijdag 02 december 2011 @ 14:58:
gebruik dan een resetstylesheet

Nee, want daar kleven ook allerlei nadelen aan vast.

Liever een normalize stylesheet, zoals deze: http://necolas.github.com/normalize.css/

(trouwens ook terug te vinden in html5boilerplate)

[Bosmonster]

Reset-CSS wordt alleen gebruikt door developers die eigenlijk niet weten wat verschillende browsers precies doen met standaardstyles en dus maar alles domweg resetten, met alle gevolgen van dien.

Een normalize CSS is een prima alternatief, al ben ik geen fan van sommige onderdelen van die CSS. Zoals bijvoorbeeld de IE7 star-hacks.

Mijn ervaring is eigenlijk dat als je weet wat er gebeurt, je beiden niet nodig hebt.

[ Voor 15% gewijzigd door Bosmonster op 07-12-2011 12:56 ]

[418O2]

Ik gebruik wel een resetcss, maar wel aangepast (een strong zonder font-weight:bold en fuckedup ul's is natuurlijk kolder).

zie er verder weinig issues mee

[Bosmonster]

Jij vindt een strong zonder bold kolder, maar headers of paragraphs zonder marges niet? Waar trek je dan de grens?

[ Voor 6% gewijzigd door Bosmonster op 07-12-2011 13:10 ]

[418O2]

Ja dat klopt wel, maar dat is toch per site verschillend...

Maargoed; het wordt tijd om die normalize.css te gaan gebruiken. Heb een standaardplatform waar alles al volgens de gemiddelden is opgemaakt (zoals wij dat over het algemeen) moeten implementeren, dus ik begin al eigenlijk nooit meer vanaf 0.