Ik heb al vaak afbeeldingen en inzetvakken bovenaan een container laten zweven met float:right (of left). Onlangs kreeg ik de behoefte om een div te laten zweven in de rechterbenedenhoek van een andere div met de normale tekstomloop die je krijgt met float (tekst alleen boven en links omwikkeld).
Ik dacht dat dit relatief eenvoudig moest zijn ook al heeft float geen waarde voor de onderkant maar ik'ben er niet in geslaagd om het te doen met behulp van een aantal technieken en zoeken op het web heeft'niets anders opgeleverd dan het gebruik van absolute positionering maar dit geeft niet het juiste word wrap gedrag.
Ik had gedacht dat dit een heel gebruikelijk ontwerp zou zijn maar blijkbaar is het dat niet. Als niemand een suggestie heeft zal ik mijn tekst in aparte vakjes moeten verdelen en de div handmatig moeten uitlijnen maar dat is nogal precair en ik'zou het vreselijk vinden om dat op elke pagina te moeten doen die het nodig heeft.
EDIT: Gewoon een opmerking voor iedereen die hier komt. De vraag die hierboven is gelinkt als een duplicaat is in feite geen duplicaat. De eis dat de tekst om het inzetelement heen moet lopen maakt het totaal anders. In feite maakt het antwoord op het bovenste gestemde antwoord hier duidelijk waarom het antwoord in de gekoppelde vraag verkeerd is als een antwoord op deze vraag. Hoe dan ook, er lijkt nog steeds geen algemene oplossing voor dit probleem te zijn, maar sommige van de oplossingen die hier en in de gekoppelde vraag zijn gepost, kunnen voor specifieke gevallen werken.
Zet de bovenliggende div op position: relative
, dan de binnenste div op...
position: absolute;
bottom: 0;
...en daar ga je :)
Na een paar dagen worstelen met verschillende technieken moet ik zeggen dat dit onmogelijk lijkt te zijn. Zelfs met javascript (wat ik niet wil doen) lijkt het niet mogelijk.
Ter verduidelijking voor degenen die het misschien niet begrepen hebben - dit is waar ik naar op zoek ben: in de uitgeverswereld is het heel gebruikelijk om een inzet (plaatje, tabel, figuur, etc.) zo op te maken dat de onderkant gelijk loopt met de onderkant van de laatste regel tekst van een blok (of pagina) met tekst die op een natuurlijke manier om de inzet heen loopt boven en naar rechts of links, afhankelijk van aan welke kant van de pagina de inzet zich bevindt. In html/css is het triviaal om de float stijl te gebruiken om de bovenkant van een inzet op één lijn te brengen met de bovenkant van een blok, maar tot mijn verbazing blijkt het onmogelijk om de onderkant van de tekst en de inzet op één lijn te brengen, ondanks dat het een gebruikelijke layout taak is.
Ik denk dat ik de ontwerpdoelen voor dit item zal moeten herzien, tenzij iemand op het laatste moment nog een suggestie heeft.