Archief - CSS: problemen met positionering divs

Het is de eerste keer dat ik werk met een layout opgebouwd uit divs.
Dit is wat ik tot nu toe af heb (CSS-bestand).

Het grijze stuk zou echter een minimale hoogte moeten hebben (hier heb ik vroeger eens een script voor gekregen dat ik nu weer gebruikt heb) zodat de volledige schermhoogte gebruikt wordt, maar dit lijkt hier niet te lukken.
Verder zou de zwarte band onderaan zou altijd op 10-20px van de onderkant moeten staan en zou er maar een beetje ruimte mogen zijn tussen het grijze gedeelte en de zwarte rand.

Ter verduidelijking heb ik hier een voorbeeld van hoe het er zou moeten uitzien.

Iemand een idee wat ik nog moet aanpassen om mijn pagina te krijgen zoals de afbeelding?

Alvast bedankt.

een dikke week geleden is hier een tread gepost met een soort gelijk probleem
(hij noemde CSS: bottom)

daar staat de oplossing in
kzalt nog ff verduidelijken:
ge zet alles in een grote container
die geeft ge 100% height en een margin-bottom van XX px (xx = de hoogte van uw footer onderaan)

uw footer geeft ge gewoon bottom: 0px

uw body moet ook wel 100%height hebben, de rest zult ge wel uit die andere tread kunne halen

groeten

Ik heb nu ahv die andere thread wat aanpassingen gedaan.
Het resultaat kan je hier bekijken.
Vreemd genoeg werkt de margin onderaan wel niet in FireFox (in IE en Opera wel).
Weet je misschien hoe ik dit nog kan oplossen? Het gedeelte dat hier voor zorgt is dit:

De negatieve margin zat zo in het voorbeeld en mijn footer is 50px hoog dus heb ik 15px ruimte (maar niet in FireFox).
Het laatste dat ik niet opgelost krijg is die min-height van het grijze stuk.

De negatieve margin zat zo in het voorbeeld en mijn footer is 50px hoog dus heb ik 15px ruimte (maar niet in FireFox).

Klik om te vergroten...

ksnap het nut van die 15px overschot wel niet maar kom,
uw footer heeft waarsch in de css bottom: 0px gekregen
dus FF zet die tegen de bottom van de pagina (correct dus)
IE interpreteert het wrs wel fout

Obliv` zei:

ksnap het nut van die 15px overschot wel niet maar kom,
uw footer heeft waarsch in de css bottom: 0px gekregen
dus FF zet die tegen de bottom van de pagina (correct dus)
IE interpreteert het wrs wel fout

Klik om te vergroten...

Bij de footer staat geen bottom ingesteld en zelfs als ik er een zet op 15px gebeurt er niets. Maar dit is nog niet zo'n groot probleem. Ik zou liever eerst die min-height gemaakt krijgen. Die footer is maar een detail.

Ik heb gevonden waarom de min-height niet werkte. Dit werkt precies enkel met een vast aantal px en niet met een percentage.
Een vast aantal px kan ik natuurlijk niet gebruiken omdat dit afhangt van de resolutie. Weet er iemand misschien een andere
manier om het grijze vak te forceren om altijd tot 50px boven de footer te komen, ook als er niet veel in staat?

Rayne Varga zei:

Ik heb gevonden waarom de min-height niet werkte. Dit werkt precies enkel met een vast aantal px en niet met een percentage.
Een vast aantal px kan ik natuurlijk niet gebruiken omdat dit afhangt van de resolutie. Weet er iemand misschien een andere
manier om het grijze vak te forceren om altijd tot 50px boven de footer te komen, ook als er niet veel in staat?

Klik om te vergroten...

ge kunt wel via javascript de resolutie te wete kome en dan de min height in functie van de resolutie zetten denk ik

//EDIT
waar werkte die % bij min-height niet?
FF of IE
normaal zou da in FF moete werken
in IE moet je dan height: 100% gebruike ipv min-height