Positioning question: I almost miss tables...

I've looked at manuals and experimented until my brain's oozing out of
my ears, and I still can't figure out what I anticipate will prove to
be fairly basic css layout knowledge.
I'd be amazed if this was the first (or even if only the 100th) time
someone has asked about this sort of situation. So I apologise, not
least for the awkwardness of my attempt below to illustrate my
ignorance.

I could produce a table such as this...

<table width="400" border="1">
<tr>
<td width="300">
<p>...I can put a lot of stuff in this 'CELL 1' knowing that now
matter how full it gets, or whatever the browser font-size is set to,
the next cell in this row could have just one character and it will
always sit neatly at the bottom right:</p>
</td>
<td width="100" align="right" valign="bottom">
<p>2</p>
</td>
</tr>
<tr>
<td colspan="2">
<p>I also know that as the bottom border of the cells above expands
down to accomodate the contents, 'CELL 3' will maintain its relative
position beneath them, and so on for any more rows I include.</p>
</td>
</tr>
</table>

I just can't get my head around how to successfully position divisions
to match such an arrangement of cells.

The nearest I got was with an outer division, nesting a 'float: left'
[i.e. as per CELL 1] div and a 'float: right' [as per 2] div, but
unless I specified a height for the right-floated div (which of course
would be rendered useless if someone maximised the font size in their
browser) I had no way to shift its single character down to match the
bottom border of the left-floated div... and even then I was cludging
it...

Plus, as I understand it, floated divisions are taken out of the
normal 'flow', so trying to make sure that the contents of Cell 3
stays neatly beneath the two divisions above isn't so assured.

I really want to stick with css, with tables reserved as a last
resort. Obviously I'd be very happy to see an elegant bit of css that
does the business, but the URL of a decent (i.e. comprehensible)
webpage would be great.

Thanks for getting this far!

On Fri, 20 Aug 2004 16:58:17 +0100, glutinous
<glutinosity (AT) yahoo (DOT) co.uk> wrote:

I've looked at manuals and experimented until my brain's oozing out of
my ears, and I still can't figure out what I anticipate will prove to
be fairly basic css layout knowledge.
I'd be amazed if this was the first (or even if only the 100th) time
someone has asked about this sort of situation. So I apologise, not
least for the awkwardness of my attempt below to illustrate my
ignorance.

I could produce a table such as this...

table width="400" border="1"
tr
td width="300"
p>...I can put a lot of stuff in this 'CELL 1' knowing that now
matter how full it gets, or whatever the browser font-size is set to,
the next cell in this row could have just one character and it will
always sit neatly at the bottom right:</p
/td
td width="100" align="right" valign="bottom"
p>2</p
/td
/tr
tr
td colspan="2"
p>I also know that as the bottom border of the cells above expands
down to accomodate the contents, 'CELL 3' will maintain its relative
position beneath them, and so on for any more rows I include.</p
/td
/tr
/table

I just can't get my head around how to successfully position divisions
to match such an arrangement of cells.

The nearest I got was with an outer division, nesting a 'float: left'
[i.e. as per CELL 1] div and a 'float: right' [as per 2] div, but
unless I specified a height for the right-floated div (which of course
would be rendered useless if someone maximised the font size in their
browser) I had no way to shift its single character down to match the
bottom border of the left-floated div... and even then I was cludging
it...

Plus, as I understand it, floated divisions are taken out of the
normal 'flow', so trying to make sure that the contents of Cell 3
stays neatly beneath the two divisions above isn't so assured.

I really want to stick with css, with tables reserved as a last
resort. Obviously I'd be very happy to see an elegant bit of css that
does the business, but the URL of a decent (i.e. comprehensible)
webpage would be great.

Thanks for getting this far!

Ok, of course as soon as I did this I had another go at floating div1
& div2 within a division, and apparently got it right: div3 (below the
other two) stays neatly where it's supposed to be.
But I still can't figure out how to get div2 to occupy the same height
as div1, so its single-character contents stays at the bottom of the
div...

On Fri, 20 Aug 2004 17:08:54 +0100, glutinous
<glutinosity (AT) yahoo (DOT) co.uk> wrote:

<snip>

I came across some explanations on this NG as to why 'vertical-align:'
(which I hadn't bothered with trying) didn't work, which introduced me
to some interesting info on the 'vertical alignment in divs' issue.

Additionally, as far as | can tell, it's not possible to make a [for
e.g.] floated-right division vertically stretch to match the height of
a taller (because of higher text content) floated-left div, and that
css tables are dodgy, so the cludge of using an html table looks like
the solution.

I'd still appreciate [positive] comments on any of this!

glutinous <glutinosity (AT) yahoo (DOT) co.uk> wrote:

I'd still appreciate [positive] comments on any of this!

They were out of positive comments in my local store.

I'd wager that the reason why no-one replied so far is that we are tired
of yet another "how can css be any good when it can't do this: [mock
table]".

You cannot replace all table layouts with a css layout, not even with
css tables (which are not supported by IE).

Feel free to now start proclaiming that css must therefore suck (we see
that happening a lot also).

In the unlikely event that you are willing to open your mind and learn
something, post a url with an example that uses real content and we'll
show you methods to create an attractive css layout. Note that this
requires a willingness to accept that you are probably trying to do
something which you shouldn't be trying in the first place.

--
Spartanicus

On Fri, 20 Aug 2004 16:58:17 +0100, glutinous <glutinosity (AT) yahoo (DOT) co.uk>
wrote:

I'd be amazed if this was the first (or even if only the 100th) time
someone has asked about this sort of situation. So I apologise, not
least for the awkwardness of my attempt below to illustrate my
ignorance.

I could produce a table such as this...

<snip>

td colspan="2"
p>I also know that as the bottom border of the cells above expands
down to accomodate the contents, 'CELL 3' will maintain its relative
position beneath them, and so on for any more rows I include.</p
/td

Well you've described what you want. What you haven't done is described
why you want it. There are quite a few site layouts that have grown up
in a particular way because that's what they happened to look like if
you did them in tables. If you slavishly try to recreate identical
layouts in CSS, you may well hit problems. The thing is to find a layout
that looks good and presents the information well, without worrying
about whether it looks the same as the table equivalent.

I perhaps differ from most of the regulars here in one respect: if you
want a layout to actually look like a table - say a 3x3 grid with
visible borders or chequerboard background colours - then I personally
think you might as well make it a layout table. But if you just want a
header, sidebar and footer, than CSS will do it a lot more easily and
flexibly. As soon as you start getting rowspans and colspans then it's
time to drop tables for layout.


To give you some (I hope) encouragement: I've been redoing a
frames/tables/Javascript layout. (It started as a translation exercise
from Dutch to English, but I came across so many structural problems
that I got permission to redo the site - particularly visibility for
search-engines was the clincher.) Anyway, the total size of the HTML
files reduced from 1Mb to under 350Kb, and I think that is a fair
indication of the degree of simplification I've achieved.

The layout isn't quite the same, and some people didn't like the
on-screen changes all that much (though they admitted that it was
perhaps just a question of what they'd been used to). But the printed
pages look vastly better, and so is the layout in a small window.

--
Stephen Poley

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

On Sat, 21 Aug 2004 09:45:19 +0200, Stephen Poley
<sbpoleySpicedHamTrap (AT) xs4all (DOT) nl> wrote:

On Fri, 20 Aug 2004 16:58:17 +0100, glutinous <glutinosity (AT) yahoo (DOT) co.uk
wrote:

I'd be amazed if this was the first (or even if only the 100th) time
someone has asked about this sort of situation. So I apologise, not
least for the awkwardness of my attempt below to illustrate my
ignorance.

I could produce a table such as this...

snip

td colspan="2"
p>I also know that as the bottom border of the cells above expands
down to accomodate the contents, 'CELL 3' will maintain its relative
position beneath them, and so on for any more rows I include.</p
/td

Well you've described what you want. What you haven't done is described
why you want it. There are quite a few site layouts that have grown up
in a particular way because that's what they happened to look like if
you did them in tables. If you slavishly try to recreate identical
layouts in CSS, you may well hit problems. The thing is to find a layout
that looks good and presents the information well, without worrying
about whether it looks the same as the table equivalent.

Thank you! I was experimenting with css layourts to see what I'd
lerned and what was achievable. My query wasn't for a specific
purpose, but to clarify a point I thought I'd misunderstood, i.e.

When two divisions of non-specified height (to allow for variations in
the amount of text within them) are placed side by side, if one is
taller than the other, I couldn't find a straight-forward way to
vertically align their bottom edges, so I just thought I must have
missed something..

I perhaps differ from most of the regulars here in one respect: if you
want a layout to actually look like a table - say a 3x3 grid with
visible borders or chequerboard background colours - then I personally
think you might as well make it a layout table. But if you just want a
header, sidebar and footer, than CSS will do it a lot more easily and
flexibly. As soon as you start getting rowspans and colspans then it's
time to drop tables for layout.

Believe me, I'm under no illusions about what an improvement css is!
The only reason I didn't get into this years ago was because browsers
were so unreliable... then I got sidetracked and am now trying to
catch up.

To give you some (I hope) encouragement: I've been redoing a
frames/tables/Javascript layout. (It started as a translation exercise
from Dutch to English, but I came across so many structural problems
that I got permission to redo the site - particularly visibility for
search-engines was the clincher.) Anyway, the total size of the HTML
files reduced from 1Mb to under 350Kb, and I think that is a fair
indication of the degree of simplification I've achieved.

The layout isn't quite the same, and some people didn't like the
on-screen changes all that much (though they admitted that it was
perhaps just a question of what they'd been used to). But the printed
pages look vastly better, and so is the layout in a small window.

I actually have the problem of convincing a client I've done anything
at all to their site when I use css instead of <font> tags and tables,
etc. :-)

On Sat, 21 Aug 2004 08:18:07 +0100, Spartanicus <me (AT) privacy (DOT) net>
wrote:

glutinous <glutinosity (AT) yahoo (DOT) co.uk> wrote:

I'd still appreciate [positive] comments on any of this!

They were out of positive comments in my local store.

I'd wager that the reason why no-one replied so far is that we are tired
of yet another "how can css be any good when it can't do this: [mock
table]".

Well you certainly conform to the stereotypical lowest-common
denominator on this NG, ascribing attitudes where none were suggested.
At no point did I say any such thing. Even my subject line says "I
_almost miss_ tables". And I apologised in advance for the query, as I
expected it'd have been asked before. Furthermore, if you hadn't
snipped my posting, it'd have been plain I'd already managed to learn
what I needed to know, and I likened reverting to tables as a
'cludge'. If you weren't in such a hurry to show off you'd maybe
notice these things.

You cannot replace all table layouts with a css layout, not even with
css tables (which are not supported by IE).

So I gather. Well done.

Feel free to now start proclaiming that css must therefore suck (we see
that happening a lot also).

No thank you. But I will say that your posting sucks, big time!
Where do you get off on being so patronising and offensive?

In the unlikely event that you are willing to open your mind and learn
something, post a url with an example that uses real content and we'll
show you methods to create an attractive css layout. Note that this
requires a willingness to accept that you are probably trying to do
something which you shouldn't be trying in the first place.

Go ---- yourself you arrogant pipsqueak. I'll do all the learning I
need without your type of 'assistance'. Fortunately there are some
civilised people here who are willing to help, and others who know
better than to just look for an argument.