[CSS] Container uitrekken tot footer met margin

[jmxd]

Hoi,

Misschien een beetje een onduidelijke topic-titel maar kan het niet zo goed in één zin samenvatten. Ik wil iets bereiken met CSS en het wil maar niet lukken. Hier het probleem:

Ik heb twee div's, één voor de content en een footer. Wat ik wil is dat de footer altijd tegen de bodem van de browser geplakt zit, en de content altijd tegen de footer. Máár ik wil WEL een margin van 12 pixels om het geheel heen.

Zoals de volgende afbeelding dus:



Het probleem is dat ik het onmogelijk voor elkaar krijg het zonder scroll-balken voor elkaar te krijgen.
De container en footer hebben beide ook een border en een box-shadow, wat het geheel nog wat lastiger maakt.

Hier is een voorbeeld van hoe ik het op dit moment heb, en waar ik echt niet verder kom:
http://jamiemarciano.me/tweakers/

De CSS is op dit moment als volgt:

Cascading Stylesheet:

 html, body {
    background:                 #eee url('../i/grain.png') repeat;
    font:                       normal 9pt 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
    color:                      #333;
    height:                     100%;
    margin:                     0;
    }


#container, #footer {
    background:                 #fff;
    width:                      1200px;
    padding:                    10px;
    border:                     1px solid #bbb;
    box-shadow:                 0px 0px 3px #ccc;
   -webkit-box-shadow:          0px 0px 3px #ccc;
   -moz-box-shadow:             0px 0px 3px #ccc;
    }
#container {
    min-height:                 100%;
    margin:                     12px auto -78px auto;
    }
#footer {
    margin:                     12px auto;
    }

.push {
    height:                     72px;
    }

Ik ben hier gisteren al meer dan 1.5 uur mee bezig geweest, en vandaag al weer een hele tijd en kan echt geen eventuele oplossingen meer verzinnen.

Heb ook al geprobeerd een wrapper om het hele geheel te doen, deze een margin van 12px geven en dan de inhoud proberen in die wrapper uit te rekken maar dat mocht ook niet baten.


Ik hoop dat hier iemand geniaals rondloopt die hier wel een oplossing voor weet.

Alvast bedankt

[Bosmonster]

Die margin als padding op je body zetten en dan je content op 100% min-height met margin aan de onderkant? En je footer absoluut positioneren daaronder.

[Saven]

volgensmij kan je dat toch inderdaad doen met min height. je gooit alles in 1 container, die position absolute op de bottom. en dan bovenaan van je container een margin mee geven. en in die container een margin-bottom op de content zodat je daar ruimte tussen de footer krijgt.

snap je het nog?

[mcDavid]

Moet de "margin" tussen de footer en content echt doorzichtig zijn? Anders zou ik gewoon de footer een paar pixels hoger maken en een achtergrondafbeelding geven om de margin na te bootsen.

[Snobbieh]

Twylight schreef op donderdag 10 februari 2011 @ 16:21:
Ik heb twee div's, één voor de content en een footer. Wat ik wil is dat de footer altijd tegen de bodem van de browser geplakt zit, en de content altijd tegen de footer. Máár ik wil WEL een margin van 12 pixels om het geheel heen.

Kan je het niet wat beter uitleggen?
Je zegt dat je de content altijd aan de footer wil, maar dat er overal rond 12px margin moet zijn.
Wat ik dus versta: footer plakt aan content, rond het GEHEEL (footer en content) een margin van 12px.
Je afbeelding toont dan weer wel dat de footer niet vastplakt aan de content maar een margin heeft...
En dan met je footer die altijd tegen de bodem van je browser moet plakken...

[Snobbieh]

Cascading Stylesheet:

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

} 
html, body {
    background:                 #eee url('../i/grain.png') repeat;
    font:                       normal 9pt 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
    color:                      #333;
    height:                     100%;
    margin:                     0;
    }


#container, #footer {
    background:                 #fff;
    width:                      1200px;
    padding:                    10px;
    border:                     1px solid #bbb;
    box-shadow:                 0px 0px 3px #ccc;
   -webkit-box-shadow:          0px 0px 3px #ccc;
   -moz-box-shadow:             0px 0px 3px #ccc;
    }
#container {
    height: 100%;
    margin:                     12px auto -78px auto;
    margin-bottom: 12px;
    }
#footer {
    margin-left: auto;
margin-right: auto;
    position: relative;
    margin-top: 30px;
    max-height: 20px;

    }

Weet niet of je dit bedoelde, maar ik denk het wel