[CSS] Automatisch aanpassen van hoogtes

[Ronnyrr]

Hallo allemaal,

Voor school ben ik een eigen Wordpress thema aan het maken, echter loop ik tegen een aantal problemen aan. In deze afbeelding zijn allebei mijn problemen goed zichtbaar.


(klik voor grotere versie)

Het eerste probleem zit hem in de posts.
Als er alleen tekst in de posts staat past de hoogte van die div zich automatisch aan in vergelijking met de hoeveelheid tekst die erin staat.

Echter als ik er een afbeelding bij in de past de hoogte van de div zich niet meer aan en valt de afbeelding buiten de div.

Ik heb al verschillende dingen uitgeprobeerd met de instellingen van de hoogte en ook al op google geprobeerd te zoeken naar een oplossing voor dit probleem, echter weet ik er nog niet uit te komen. Iemand die hier wellicht een oplossing voor heeft?

Het tweede probleem zit hem bij de footer.

Zodra er meerdere posts zijn komt de footer netjes aan de onderkant van het scherm terecht. Echter wanneer er maar één post aanwezig is zoals in de afbeelding zichtbaar komt de footer ergens halverwege (afhankelijk van de resolutie van het scherm).

Ook hiervoor heb ik op google gezocht en daar zijn tal van mogelijkheden te vinden. De meeste mogelijkheden werken ook wel maar doordat ik bij al die opties in de css dit:

Cascading Stylesheet:

html, body { height:100%;}

moet toevoegen krijg ik onnodig veel witruimte tussen de post en de footer in.

Hopelijk kan iemand mij verder helpen met deze problemen.

Bvb, Ronny

[Verwijderd]

Float je toevallig de afbeelding?
Zet er eens een clear divje er onder( <div style="clear:both"></div> )

[Ronnyrr]

Yes, me afbeeldingen liet ik floaten om ze links of rechts van de tekst uit te lijnen.
Een clear div was inderdaad de oplossing, hartstikke bedankt!

Echter heb bied dat geen oplossing voor mijn tweede probleem.

Iemand daar wellicht nog suggesties of tips voor?

[Slurpie]

http://www.cssstickyfooter.com/

[Wiethoofd]

Plaatje buiten je content omdat je em float => de wrapper waarin het plaatje zit een overflow: hidden; geven.

[Ronnyrr]

Slurpie schreef op donderdag 10 mei 2012 @ 18:53:
http://www.cssstickyfooter.com/

Zoals ik al aangaf in mijn begin post werken al die opties die via google aangegeven worden niet.

Door de
[css]html, body { height:100%;}[/css]
die ik moet toevoegen aan mijn css krijg ik tussen mijn content en mijn footer een enorme witruimte.

Wiethoofd schreef op donderdag 10 mei 2012 @ 18:54:
Plaatje buiten je content omdat je em float => de wrapper waarin het plaatje zit een overflow: hidden; geven.

Bedankt voor je hulp, maar het probleem met de afbeelding was al opgelost!

[Wiethoofd]

Ronnyrr schreef op donderdag 10 mei 2012 @ 19:32:
Bedankt voor je hulp, maar het probleem met de afbeelding was al opgelost!

Mijn oplossing is netter dan een clear div toe moeten voegen, daarnaast zijn er betere clearfix alternatieven.

Waarom moet die footer helemaal onderaan staan? Als ik toevallig mijn scherm in portrait zet heb ik 2560px in de hoogte, als jij maar 1 korte post op de pagina hebt staan staat die footer echt helemaal onderin (als je em goed positioneert) met een absurd grootte witruimte. Zet de footer vrijwel meteen onder je laatste content en zorg maak de rest van de pagina de (kleur van) de footer.

[Slurpie]

Ronnyrr schreef op donderdag 10 mei 2012 @ 19:32:
[...]


Zoals ik al aangaf in mijn begin post werken al die opties die via google aangegeven worden niet.

Door de
[css]html, body { height:100%;}[/css]
die ik moet toevoegen aan mijn css krijg ik tussen mijn content en mijn footer een enorme witruimte.

Dan moet je de footer niet onderaan willen hebben. Het is het een of het ander. of wil je de post gaan centeren?

[Vos]

Wiethoofd schreef op donderdag 10 mei 2012 @ 19:48:
[...]

Mijn oplossing is netter dan een clear div toe moeten voegen, daarnaast zijn er betere clearfix alternatieven.

Waarom moet die footer helemaal onderaan staan? Als ik toevallig mijn scherm in portrait zet heb ik 2560px in de hoogte, als jij maar 1 korte post op de pagina hebt staan staat die footer echt helemaal onderin (als je em goed positioneert) met een absurd grootte witruimte. Zet de footer vrijwel meteen onder je laatste content en zorg maak de rest van de pagina de (kleur van) de footer.

Met ^^. Waarom moet die footer zo ver naar onder? Gewoon een degelijke witruimte lijkt mij voldoende.