[css] clear voor alleen elementen in dezelfde container?

Pagina: 1
Acties:

  • Bananenplant
  • Registratie: Januari 2001
  • Laatst online: 07:55
Ik zit met het volgende probleem. Ik ben een blogthema aan het maken, een layout met aan de rechterkant een sidebar en de linkerkant een stuk met de content met een footer eronder. Om ervoor te zorgen dat de sidebar niet onder de footer uitsteekt als het contentveld erg leeg is heb ik deze naar rechts gefloat om 'm daar te krijgen. In posts heb ik ook wel eens plaatjes, daarvoor zijn er klassen die de plaatjes naar links of rechts floaten om de tekst netjes om het plaatje heen te draperen. Alleen steekt zo'n plaatje natuurlijk wel uit als de tekst erg kort is.
Een voorbeeld is dit; Dave steekt eruit, maar als ik de footer voor die post (met de permalinklinkjes enzo) een clear: both; geef heb ik een wit stuk totdat de sidebar afgelopen is. Een naar rechts gefloat plaatje geeft dus problemen omdat ook de sidebar naar rechts gefloat is.

Wat ik me nu afvraag is het volgende: is het niet mogelijk ervoor te zorgen dat er alleen naar floating elementen binnen hetzelfde containerelement wordt gekeken bij een clear? Wat ik zou willen is dat er binnen een post een element met clear: both; zit dat sibling is van alle plaatjes in de post en alleen dáárop de clear-property toepast. Ik zou het eigenlijk ook wel logisch vinden als dat zo was, aangezien de sidebar veel hoger in de boom zit en je binnen de afbakening van een div niks met floatende elementen ergens naast die div te maken hebt.

Ik heb ook al nagedacht over het alternatief met een linkermarge de sidebar naar rechts te drukken zodat er geen floating nodig is (okay, de content naar links floaten, maar daar zitten de plaatjes in :p ). Het probleem is echter dat dan het stuk met de content een bekende breedte moet hebben en dat de breedte van de pagina een percentage is van de breedte van het scherm. Ik kan er wel een vaste breedte van 800 pixels van maken, maar zo'n reepje in het midden van m'n scherm vind ik geen gezicht... en percentages en pixelwaarden optellen/aftrekken wil niet in css.

Iemand een idee hoe ik dit kan oplossen? Ik kan me niet voorstellen dat niemand anders ertegenaanloopt en het daardoor niet in de css-standaard zit...

❤️‍🩹 Bezuinigen op armen en zieken 🤕 ? Welnee, Zucmantaks, nu 💰 !