[CSS] Dynamische footer?

[Verwijderd]

Ik heb een pagina met dynamisch gegenereerde content.

De lengte van de pagina staat dus niet vast. De footer behoort elke keer helemaal onderaan de pagina te staan, dit is dus niet altijd hetzelfde als onderaan in het scherm.

Mijn pagina is opgebouwd uit 3 delen.

<div class=header>
<div class=body>
<div class=footer>

Ik heb geprobeerd float te gebruiken. header float: left, clear: both, en footer float:left, clear both, maar ik kon het daarmee niet werkend krijgen.

Bovendien gebruik ik liever geen floats.

Met absolute positioning heb ik geen idee hoe ik het dynamisch kan maken, aangezien je de lengte van de pagina van te voren niet weet en je met 'absolute' een vaste waarde geeft.

position: absolute;
bottom: 0px;

ook geprobeerd, maar dan komt de footer altijd onderaan het scherm en niet onderaan de page zoals ik wil.

Iemand enig idee?

Ik hoor het heel graag.

[Grijze Vos]

Kun je in een plaatje even schetsen wat je bedoelt. Want het lijkt nu alsof je gewoon 3 blokken onder elkaar wilt, en dat is gewoon 3 divs en klaar.

[Zoefff]

Waarom wil je de footer laten floaten? Dan komt 'ie júist niet altijd onderaan de pagina. Gewoon onder de body-div zetten zou voldoende moeten zijn. Als je in de body-div gebruik maakt van floats moet je de footer misschien nog iets als 'clear:both;' meegeven. Maar zeker geen float

Of ik begrijp je verkeerd natuurlijk. Geef eens een voorbeeldje

[Verwijderd]

ik gebruik hiervoor altijd een extra div wat de pagecell bevat (content en footer)
met daarin de div van body en de div van footer
waarin je in de pagecell een position:absolute meegeeft, in de andere divs geen position

dus
<div id=pagecell>
<div id=content>
content
</div>
<div id=footer>
footer
</div
</div>

[JHS]

Rubber-Duck: En waarom zou je dat in vredesnaam doen . Als ik het goed begrijp wil de TS gewoon drie divs onder elkaar, wat ze in principe automagisch doen, ook zonder een container absolute positioning mee te geven?

[Verwijderd]

Bedankt voor de reacties.

Ik wil inderdaad divs onder elkaar hebben. Al jullie oplossingen kloppen inderdaad.

Echter ik had mijn probleem versimpeld weergegeven.

-Ik heb een <div body> daarstaat alles in
-dan heb ik een <div main> daar staat een linkerkant <div leftbar> en een rechterkant <div rightbar>
en die moeten absolute positioning hebben zodat ze naast elkaar komen (misschien moet ik daar dus float gebruiken).
-onderaan heb ik dan die footer <div footer>

dit alles moet zo blijven als de pagina dynamiosch gegenereerd wordt.

Door jullie commentaar ben ik aan testen geslagen en ik vorder al steeds meer.

Ik hoop het zo opgelost te hebben, ik ga even die float in de main proberen.

[Zoefff]

De denkfout zit hem in de left- en rightbar. Die hoef je niet absoluut te positioneren om ze naast elkaar te krijgen. De leftbar geef je float:left; mee, de rightbar komt er dan automatisch naast te staan. En volgende div (footer) komt dan gewoon weer netjes onder deze twee te staan.

Zie voor een voorbeeld bijvoorbeeld mijn site http://www.kraagjes.nl/albums

[Verwijderd]

klinkt logisch ja, en ik heb dat geprobeerd, alleen komen ze nog steeds onder elkaar..

om ze nu naast elkaar te krijg gebruik ik in plaats van position: absolute -> position: relative

Nu staan ze inderdaad naast elkaar en de footer eronder, alleen de hoogte van de rightbar klopt niet.

Vreemd dat float niet werkt in ieder geval...

[Zoefff]

Om de hoogtte van de rightbar goed te krijgen moet je waarschijnlijk iets als 'faux columns' toepassen, zoek maar eens op google. Maar, laat nou eens een voorbeeldje zien! Dan kunnen we je veel makkelijker helpen...

[Verwijderd]

probleem opgelost...

float werkt nu gewoon

een span had ook dezelfde classname om een stukje text daarom was layout nog beetje verneukt..

thanks everybody

[Verwijderd]

mooi zo

@JHS
Dit gebruik ik, omdat ik meestal mijn top / banner ook absoluut positioneer. Als ik dan de footer wil plaatsen doet hij dit gewoon bovenin. Dus is het lastig als je banner + content welke dynamisch is absoluut positioneer, om er dan onder nog eens een footer te zetten.
Ik dacht dat TS dat ook gebuikte