Bottom-right corner

[Andre Majorel]

How do you align an <imgagainst the bottom-right corner of an
enclosing block so that the text in the block flows around it ?

<!-- Block begins here -->

<p>
En ce qui concerne la conjoncture qui nous occupe, il est
nécessaire d'imaginer l'ensemble des problématiques déjà en
notre possession. Où que nous mène la sinistrose de cette
fin de siècle, il ne faut pas négliger d'examiner la
globalité des solutions s'offrant à nous. Dans le cas
particulier de l'inertie induite, il serait intéressant de
se préoccuper de chacune des voies possibles.
</p>

<img src="img.png" alt="Your ad here">

<!-- Block ends here -->

<hr>

<p>
Blah
</p>

Rendered as :

En ce qui concerne la conjoncture qui nous occupe, il est
nécessaire d'imaginer l'ensemble des problématiques déjà en
notre possession. Où que nous mène la sinistrose de cette fin
de siècle, il ne faut pas négliger d'examiner
la globalité des solutions s'offrant à nous. +-------------+
Dans le cas particulier de l'inertie induite, | Your ad |
il serait intéressant de se préoccuper de | here |
chacune des voies possibles. +-------------+

=============== =============== =============== =============== ==

Blah

Thanks in advance.

--
André Majorel <URL:http://www.teaser.fr/~amajorel/>
(Counterfeit: on****@sinuous. com wu***@buckthorn .com)
"Duty, honor, country" -- Douglas MacArthur
"Travail, famille, patrie" -- Philippe Pétain

[Ben C]

On 2007-05-23, Andre Majorel <ch****@hallibu rton.comwrote:

How do you align an <imgagainst the bottom-right corner of an
enclosing block so that the text in the block flows around it ?

I don't think it's possible unless you are prepared to predetermine the
height of the enclosing block. If you are, you just make the <img>
float: right, put it inside the block before any of the text, and set
its top margin to align it to the bottom of the container.

The problem is if you want text flowing around the <img>, the <imghas
to be a float. Nothing else affects the text flow in the same way. But
if it's a float, you can't also absolutely position it (since position:
absolute implies float: none).

>
<!-- Block begins here -->

<p>
En ce qui concerne la conjoncture qui nous occupe, il est
nécessaire d'imaginer l'ensemble des problématiques déjà en
notre possession. Où que nous mène la sinistrose de cette
fin de siècle, il ne faut pas négliger d'examiner la
globalité des solutions s'offrant à nous. Dans le cas
particulier de l'inertie induite, il serait intéressant de
se préoccuper de chacune des voies possibles.
</p>

<img src="img.png" alt="Your ad here">

<!-- Block ends here -->

<hr>

<p>
Blah
</p>

Rendered as :

En ce qui concerne la conjoncture qui nous occupe, il est
nécessaire d'imaginer l'ensemble des problématiques déjà en
notre possession. Où que nous mène la sinistrose de cette fin
de siècle, il ne faut pas négliger d'examiner
la globalité des solutions s'offrant à nous. +-------------+
Dans le cas particulier de l'inertie induite, | Your ad |
il serait intéressant de se préoccuper de | here |
chacune des voies possibles. +-------------+

=============== =============== =============== =============== ==

Blah

Thanks in advance.

[Jim Moe]

Andre Majorel wrote:

How do you align an <imgagainst the bottom-right corner of an
enclosing block so that the text in the block flows around it ?

<!-- Block begins here -->

<p>
En ce qui concerne la conjoncture qui nous occupe, il est
nécessaire d'imaginer l'ensemble des problématiques déjà en
notre possession. Où que nous mène la sinistrose de cette
fin de siècle, il ne faut pas négliger d'examiner la
globalité des solutions s'offrant à nous. Dans le cas
particulier de l'inertie induite, il serait intéressant de
se préoccuper de chacune des voies possibles.
</p>

<img src="img.png" alt="Your ad here">

<!-- Block ends here -->

img { float: right; }
<p>Blah, blah, yadda. <img .... Yadda, yadda, blah.</p>

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Andre Majorel]

On 2007-05-23, Ben C <sp******@spam. eggswrote:

On 2007-05-23, Andre Majorel <ch****@hallibu rton.comwrote:

>How do you align an <imgagainst the bottom-right corner of an
enclosing block so that the text in the block flows around it ?

I don't think it's possible unless you are prepared to predetermine the
height of the enclosing block. If you are, you just make the <img>
float: right, put it inside the block before any of the text, and set
its top margin to align it to the bottom of the container.

The problem is if you want text flowing around the <img>, the <imghas
to be a float. Nothing else affects the text flow in the same way. But
if it's a float, you can't also absolutely position it (since position:
absolute implies float: none).

Thanks. A float with a relative position would be fine, if it
were relative to the bottom right corner of the enclosing block.
I didn't find a way to do that with CSS 2. Oversight or left out
because it was hard to implement ?

--
André Majorel <URL:http://www.teaser.fr/~amajorel/>
(Counterfeit: ox**@therefor.c om ip****@demur.co m)
"Duty, honor, country" -- Douglas MacArthur
"Travail, famille, patrie" -- Philippe Pétain

[Ben C]

On 2007-05-24, Andre Majorel <ch****@hallibu rton.comwrote:

On 2007-05-23, Ben C <sp******@spam. eggswrote:

>On 2007-05-23, Andre Majorel <ch****@hallibu rton.comwrote:

>>How do you align an <imgagainst the bottom-right corner of an
enclosing block so that the text in the block flows around it ?

I don't think it's possible unless you are prepared to predetermine the
height of the enclosing block. If you are, you just make the <img>
float: right, put it inside the block before any of the text, and set
its top margin to align it to the bottom of the container.

The problem is if you want text flowing around the <img>, the <imghas
to be a float. Nothing else affects the text flow in the same way. But
if it's a float, you can't also absolutely position it (since position:
absolute implies float: none).

Thanks. A float with a relative position would be fine, if it
were relative to the bottom right corner of the enclosing block.
I didn't find a way to do that with CSS 2. Oversight or left out
because it was hard to implement ?

"position: relative" is actually not relative to the container at all,
but relative to the box's normal flow position. It's like the box is
laid out as normal, and then translated by its relative offset at the
last minute, leaving a gap where it used to be.

But in your case you don't want that because the text would flow around
the gap, not around the new position of the float.

So position: relative is no good. You could get the float into position
with position: relative by starting a new block box after the paragraph,
putting the float as a float:right in there, and using the top property
to move it up by its own height. But it won't work, because the text
won't flow around it in its new position.

With position: absolute you can position relative to the bottom corner
of the container (just use bottom: 0; right: 0). But if it's position:
absolute it stops being a float.

You can do it with JavaScript of course as was recently suggested.