[css] Onmogelijke opmaak - float right/bottom?

[Anoniem: 308713]

Is het volgende mogelijk in CSS? Na wat zoekwerk lijkt het antwoord negatief te zijn, maar wellicht dat een van jullie een goede opmerking heeft. Ik heb de volgende situatie:



Gewenst: er dient een rood tekstblok te zijn, waar een tekst met variabele lengte in staat (zie de afbeelding). let op: het kan bijvoorbeeld ook één woord zijn. In dit rode tekstblok, een DIV-element, dient een ander element te staan, met een vast formaat (het gele blokje, eveneens een DIV-element). Dit gele blokje dient te allen tijde rechtsonder in het rode element te staan, ongeacht de inhoud van het rode element.

Dit kun je bewerkstelligen door het gele element absoluut te positioneren (position: absoulute, right: 0 en bottom: 0). So far so good. Maar nu dient de tekst in het rode element om het gele element te lopen. Het gele element moet dus "in de weg" staan. Echter, absoluut gepositioneerde elementen staan niet in de weg; zoals te zien is op de afbeelding.

Weet iemand of dit uberhaubt mogelijk is met CSS? Dank alvast.

[R4gnax]

Je kunt dit effect niet bereiken met alleen CSS2. De CSS3 box layout module kan het misschien wel met box-orientation: vertical en box-direction: reverse. Heb je waarschijnlijk alleen niet zoveel aan, aangezien IE dat niet ondersteunt.

[ZpAz]

Je kan het gele blokje in de 'html' toch helemaal onderaan plaatsen? (dus nog onder de tekst) en dan een float: right; display: inline; meegeven? Of gaat ie er dan onder naast staan.

[WeeJeWel]

Staat de hoogte van het gele blok vast?

[djluc]

Klein stukje javascript wat margin-top = container-height - yellowbox-height doet lost het wel op. Mooi is anders echter.