Floating an image to the bottom right of a div.

[Stephen Poley]

I'd like to float an image to the bottom of a DIV containing several
paragraphs, so that it is positioned to the right of the closing
paragraphs (and preferably below the closing paragraphs if the window is
narrow).

ASCII art (needs fixed width font):

|-------------------------|
|Qqqqqqqqqqqqqq qqqqqqqqqqq|
|qqqqqqqqqqqqqq qqqqqqqqqqq|
|qqqqqqqqqqqqqq qqqqqqqq. |
|Qqqqqqqqqqqqqq qqqqqqqqqqq|
|qqqqqqqqqqqqqq qqqqqqqqqqq|
|qqqqqqqqqqq -------------|
|qqqqqqqqqqq | ||
|qqqqqqqq. | ||
|Qqqqqqqqqqq | image ||
|qqqqqqqqqq. | ||
|Qqqqqqqqqqq | ||
|qqqqqqq. -------------|
|-------------------------|

The reason is that all the text is relevant to the image, but it is the
closing paragraphs that bear on it most directly. The total size of the
DIV will probably exceed most readers' windows.

The only way I can think of doing it is to make assumptions about the
reader's window-size / font-size and guess which paragraphs will fit
next to the image - which is exactly what the regulars here try to
avoid.

Any bright ideas?

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[Marek Mänd]

Stephen Poley wrote:

I'd like to float an image to the bottom of a DIV containing several
paragraphs, so that it is positioned to the right of the closing
paragraphs (and preferably below the closing paragraphs if the window is
narrow).
ASCII art (needs fixed width font):
|-------------------------|
|Qqqqqqqqqqqqqq qqqqqqqqqqq|
|qqqqqqqqqqqqqq qqqqqqqqqqq|
|qqqqqqqqqqqqqq qqqqqqqq. |
|Qqqqqqqqqqqqqq qqqqqqqqqqq|
|qqqqqqqqqqqqqq qqqqqqqqqqq|
|qqqqqqqqqqq -------------|
|qqqqqqqqqqq | ||
|qqqqqqqq. | ||
|Qqqqqqqqqqq | image ||
|qqqqqqqqqq. | ||
|Qqqqqqqqqqq | ||
|qqqqqqq. -------------|
|-------------------------|
Any bright ideas?

you have to use <table>'s still.
In the cell put the vertical-align css-attribute to the bottom, float
your image to the right and pump your text in that cell.
Just an idea, didnt test it. Tables are needed for broadreach
presentation amongst browsers. Current CSS standards and their support
isnt still very suitable for doing complex layouts.

HTH

[Brian]

Marek Mänd wrote:

Stephen Poley wrote:

I'd like to float an image to the bottom of a DIV containing
several paragraphs, so that it is positioned to the right of the
closing paragraphs (and preferably below the closing paragraphs if
the window is narrow).

you have to use <table>'s still. In the cell put the vertical-align
css-attribute to the bottom, float your image to the right and pump
your text in that cell.

That requires making assumptions about the user's font size. How many
paragraphs should go in the top row? How many in the bottom? (I'm
assuming you propose using more than one row, else why use <table>? Your
"solution" is rather vague in the specifics.
Just an idea, didnt test it.
Apparently not.
Tables are needed for broadreach presentation amongst browsers.
Current CSS standards and their support isnt still very suitable for
doing complex layouts.

Before making that claim, you could at least provide a demonstration.

--
Brian (remove "invalid" to email me)

[Marek Mänd]

Brian wrote:

Marek Mänd wrote:

Stephen Poley wrote:

I'd like to float an image to the bottom of a DIV containing several
paragraphs, so that it is positioned to the right of the closing
paragraphs (and preferably below the closing paragraphs if the window
is narrow). you have to use <table>'s still. In the cell put the vertical-align
css-attribute to the bottom, float your image to the right and pump
your text in that cell.

That requires making assumptions about the user's font size.

Yes, but he will probably have sufficient amount of the lines.
How many
paragraphs should go in the top row? How many in the bottom? (I'm
assuming you propose using more than one row, else why use <table>? Your
"solution" is rather vague in the specifics.

yes more than one, besides the OP drew the picture so too.

Just an idea, didnt test it.

Apparently not.

Tables are needed for broadreach presentation amongst browsers.
Current CSS standards and their support isnt still very suitable for
doing complex layouts.

Before making that claim, you could at least provide a demonstration.

The most spread browser MSIE doesnt support attribute display:table*
values. There is no other way doinging it. He could position the image
absolutely to the righght bottom corner, but absolutely psoitioned
element will be nicely where he should be, but the bad ews would be taht
the text would partly be under it. Thus the table solutuon is IMHO the
only right working one.

And your solutions on the subject are WHERE?

If you are so against tables and are aparently much more skillful than I
am on the subject of CSS, then
PELASE DO ANSWER MY QUESTION

"100% heighted table in 100% heighted table cell".
dated 15.10.2004 with message id <2t************ *@uni-berlin.de>

[Stan Brown]

"Stephen Poley" <sb************ ******@xs4all.n l> wrote in
comp.infosystem s.www.authoring.stylesheets:

I'd like to float an image to the bottom of a DIV containing several
paragraphs, so that it is positioned to the right of the closing
paragraphs (and preferably below the closing paragraphs if the window is
narrow).

The reason is that all the text is relevant to the image, but it is the
closing paragraphs that bear on it most directly. The total size of the
DIV will probably exceed most readers' windows.

Any bright ideas?

Not very bright, but permission to be imperfect. :-)

Why not just float the image to the right of the first of those
"closing paragraphs" that it's most relevant to? If there's white
space below the image, or below the last paragraph, well, that's the
nature of the Web.

Like you, I can't see any way to do it nicely without making
assumptions about the viewer's font and screen.

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/

[Lauri Raittila]

=?ISO-8859-1?Q?Marek_M=E4n d?= wrote;

And your solutions on the subject are WHERE?

There is no real solution, I believe. It is impossibe whiout programming
at the moment I think. Floating is no an option, neither is table. This
is thought many times before, and nobody has come up with idea.

Feel free to show me wrong, but dont make up any bullshit about
tables/CSS

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

[Marek Mänd]

Lauri Raittila wrote:

=?ISO-8859-1?Q?Marek_M=E4n d?= wrote;

And your solutions on the subject are WHERE? There is no real solution, I believe. It is impossibe whiout programming
at the moment I think.

I agree completely
Floating is no an option, neither is table. This
is thought many times before, and nobody has come up with idea.
what does it say?
It does say css2 has failed as a real world application.

Feel free to show me wrong, but dont make up any bullshit about
tables/CSS

well table cell with floating was the most bets visual markup to achieve
the goal. I doslike tables too, therefor I dpnt do round corners and
nice borders around boxes...

ok, but what does the css3 draft say about that OPs problem?

[Lauri Raittila]

=?ISO-8859-1?Q?Marek_M=E4n d?= wrote;

Lauri Raittila wrote:

=?ISO-8859-1?Q?Marek_M=E4n d?= wrote;

And your solutions on the subject are WHERE? There is no real solution, I believe. It is impossibe whiout programming
at the moment I think.
I was thinking this:
http://www.student.oulu.fi/~laurirai...ttomfloat.html

But overflow doesn't make paragraphs wrap when image is over them. (and
no browser even gets the image over paragraph, even if that should
happen)

Mozilla gets nearest here, I think. Tested on Firebird, maybe they have
fixed something? (I wouldn't be surprised if they had intentionally
broken their float handling...)
Floating is no an option, neither is table. This
is thought many times before, and nobody has come up with idea.

what does it say?
It does say css2 has failed as a real world application.

Well, maybe you just have negative attitude. There is nothing that hasn't
failed as a "real world application" by your standards, or is there?

Feel free to show me wrong, but dont make up any bullshit about
tables/CSS

well table cell with floating was the most bets visual markup to achieve
the goal. I doslike tables too, therefor I dpnt do round corners and
nice borders around boxes...

But it doesn't work. BTW, round corners and nice borders are easier
whiout tables, and doesn't usually break anything, unlike tables.
ok, but what does the css3 draft say about that OPs problem?

Don't know, haven't seen anything that would change the situation, but I
haven't looked since maybe last spring.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

[Brian]

Marek Mänd wrote:

Brian wrote:

Marek Mänd wrote:

Stephen Poley wrote:

I'd like to float an image to the bottom of a DIV containing
several paragraphs, so that it is positioned to the right of
the closing paragraphs

Tables are needed for broadreach presentation amongst browsers.
Current CSS standards and their support isnt still very suitable
for doing complex layouts.
Before making that claim, you could at least provide a
demonstration.

The most spread browser MSIE doesnt support attribute display:table*
values.

The point that I questions is that "Tables are needed for broadreach
presentation amongst browsers." CSS can do things that <table> markup
can not, and does not require lying about the markup.
And your solutions on the subject are WHERE?
I can't see a css solution to the problem as stated in the op.

Neither have you provided a solution using tables. If he were going to
put some paragraphs in one <tr>, and some in another <tr> along with the
image, why not just skip all the pointless <table> markup, put the image
in the last paragraph, and float it? In other words, how does <table>
markup provide anything useful here?
If you are so against tables
I am not. For data, I am for tables. For layout, they are a poor tool.
PELASE DO ANSWER MY QUESTION
Please stop shouting.
"100% heighted table in 100% heighted table cell".

What tabular data do you have the requires nested tables?

--
Brian (remove "invalid" to email me)

[Marek Mänd]

Lauri Raittila wrote:

=?ISO-8859-1?Q?Marek_M=E4n d?= wrote;

what does it say?
It does say css2 has failed as a real world application.

Well, maybe you just have negative attitude. There is nothing that hasn't
failed as a "real world application" by your standards, or is there?
I like standards, but there are quite some shortcomings in css.

the example for this failure are the css border styles, which everybody
interpret differently. The colours, plus the dashed, dotted pattern
differences. The css should ought to have provide a extended possibility
for the designer to specify the pattern bitmap.
Plus the table columns should spread the padding-left and padding-right
values to the cells (like by MSIE from ancient times)...
[] BTW, round corners and nice borders are easier
whiout tables, and doesn't usually break anything, unlike tables.

I dont know how it is possible to assign a pattern image to the border.
So it isnt easy at all. Regarlsess of tables or no tables.
Nobody needs absolutely positioned roundcorner images etc
All we see much right now are deeply nested DIVs to achive some visual
effects. This shouldnt be so. Therefore my negativism about "failing
standards in real use cases if the forthcoming standard woould match the
real life needs".

ok, but what does the css3 draft say about that OPs problem?

Don't know, haven't seen anything that would change the situation, but I
haven't looked since maybe last spring.

the border radiuses are too little for web,
The forthcoming standards should include pattern images
definable round corner images, position:fixed-x; position:fixed-y;
margins between tbodies, tbody-thead-tfoot etc.

otherwise the satndard has failed, because all we can see in net 10
years is again workarounds an hacks to achive smth that would have been
elementary if we only had css attributes for them.

Du to the cumulative nature of the rules and amount of attributes, it is
to be claimed speculatively, that the possible CSS 4 standard will be
written after 10 years. So it is reasonable to have such things included
right NOW. Becasue later is too late in the sense of sufferings by
creating web pages the next 10 years.