CSS vs Tables

[Simon Dean]

Duh...

Not another one...

Hopefully simple though, I hate the way *I* (and it might be a CSS
trait) can't intermix fixed width divisional elements with a variable
auto expanding div???

The great thing I loved with Tables, was being able to say:

<table width=90%>
<tr>
<td width=100>Left Column</td>
<td width="*">Content Here</td>
<td width=100>Right Column</td>
</tr>
</table>

and the middle column would be rendered to fill up the remaining space!
Great!

But is there another trick with CSS?

Is there some trick to "connect" columnal divs like you would a table?

I realise that tables aren't to be used for layout etc, and Im mostly
happy with the way CSS and Divs work... I just don't want to work with
800 width sites for eternity trying to be compatible with older screens.

Any thoughts?

Thanks
Simon

[Johannes Koch]

Simon Dean schrieb:

The great thing I loved with Tables, was being able to say:

<table width=90%>
<tr>
<td width=100>Left Column</td>
<td width="*">Content Here</td>

What is the width="*" for? The width attribute value is defined to be a
Length.

# Length: The value (%Length; in the DTD) may be either a %Pixel; or a
percentage of the available horizontal or vertical space. Thus, the
value "50%" means half of the available space.

<td>Content Here</td>
does the same (at least in current FF, IE and Opera on Win).
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

[Spartanicus]

Simon Dean <sj****@simtext.plus.comwrote:

>Duh...

Not another one...

So what *is* your excuse to start yet another CSS vs tables thread
instead of searching the group's archives?

>Hopefully simple though, I hate the way *I* (and it might be a CSS
trait) can't intermix fixed width divisional elements with a variable
auto expanding div???

The great thing I loved with Tables, was being able to say:

<table width=90%>
<tr>
<td width=100>Left Column</td>
<td width="*">Content Here</td>
<td width=100>Right Column</td>
</tr>
</table>

and the middle column would be rendered to fill up the remaining space!
Great!

But is there another trick with CSS?

Is there some trick to "connect" columnal divs like you would a table?

I realise that tables aren't to be used for layout etc, and Im mostly
happy with the way CSS and Divs work... I just don't want to work with
800 width sites for eternity trying to be compatible with older screens.

Probably the most important reason *why* tables are a bad choice for
creating a "layout" is that when used in the manner illustrated above
they do not allow proper incremental rendering. The problem of false
semantics when using tables for layout is a far less important issue.

It is possible to get the same behaviour with div elements, but
replacing table elements with div elements would be farcical if you then
emulate the most important problem that most table layouts suffer from.

The real problem here is that you want easy layouts, but what is easy
for you the author is causing nasty problems for the user. The real
solution is to make an effort to understand the problems with "size to
fit the content" layouts, and then learn to code so that you don't need
this nasty behaviour anymore.

--
Spartanicus

[VK]

Simon Dean wrote:

The great thing I loved with Tables, was being able to say:

<table width=90%>
<tr>
<td width=100>Left Column</td>
<td width="*">Content Here</td>
<td width=100>Right Column</td>
</tr>
</table>

May I ask what browser did you enjoy this layout on? Definitely not on
NN3/IE3 or NN4/IE4 : they had cardinally different internal formulas to
calculate remainders for pixel/percentage mixed columns: this is why it
never was used as straight as you posted. You must be having a
contamination of table columns and frameset cols.

Does your table take 90% of page or it's inside some smaller container?
Are 100px columns for content or just empty borders?

[Simon Dean]

VK wrote:

Simon Dean wrote:

>>The great thing I loved with Tables, was being able to say:

<table width=90%>
<tr>
<td width=100>Left Column</td>
<td width="*">Content Here</td>
<td width=100>Right Column</td>
</tr>
</table>

May I ask what browser did you enjoy this layout on?

I don't know. I can't remember. I've been coding like that a long time.
I like the way that I can just make the content fill out the entire
screen as necessary, making it viewable on 640x480, 800x600, 1024x768
etc... That's all I want to achieve using DIV's and CSS but without
JavaScript...

I have not yet seen a solution.

Here's an example of the abomination!:

http://www.blargle.co.uk/

Word of warning though, It's several years old, highly garish and very
messy. Flames not appreciated! :-)

I've been working on a replacement:

http://www.blargle.co.uk/beta/

(please, no flames, it's a work in progress, but I would like to hear
from Spartanicus about why this "easy" layout will cause problems for
people?)

But again, im just stuck at 800x600 for lowest common denominator...

Definitely not on
NN3/IE3 or NN4/IE4 : they had cardinally different internal formulas to
calculate remainders for pixel/percentage mixed columns: this is why it
never was used as straight as you posted. You must be having a
contamination of table columns and frameset cols.

Frameset? Frames? Ugh! No way!

Does your table take 90% of page or it's inside some smaller container?
Are 100px columns for content or just empty borders?

I would never anticipate having columns where no data is required.
Superfluous. Can be achieved with background images.

But things like on my new http://www.blargle.co.uk/beta/ page above, I
have four static buttons on a fixed width div, but I'd like that "Some
Bar" to expand to fill in the remainder of the screen... and set the div
container to say maybe, 90% screen width!

Or for example, what if I wanted button - bar - button, and allow the
bar to respond effectively on screen resize? Exactly like having a three
column solution with fixed width columns on outer?

I've used tables extensively in a roundabout way like that. But I can't
find an alternative in CSS. Whenever I've read about three column
solutions, they've given details on fixed width data, or percentage
widths, which I don't want.

Cya
Simon

[Simon Dean]

Spartanicus wrote:

Simon Dean <sj****@simtext.plus.comwrote:

>>Duh...

Not another one...

So what *is* your excuse to start yet another CSS vs tables thread
instead of searching the group's archives?

Err.... Im not sure where you got that, but, er, I've never seen this
question answered, I've never had the question answered, and I've
searched Google Groups but unable to find again relevent questions and
answers.

>>Hopefully simple though, I hate the way *I* (and it might be a CSS
trait) can't intermix fixed width divisional elements with a variable
auto expanding div???

The great thing I loved with Tables, was being able to say:

<table width=90%>
<tr>
<td width=100>Left Column</td>
<td width="*">Content Here</td>
<td width=100>Right Column</td>
</tr>
</table>

and the middle column would be rendered to fill up the remaining space!
Great!

But is there another trick with CSS?

Is there some trick to "connect" columnal divs like you would a table?

I realise that tables aren't to be used for layout etc, and Im mostly
happy with the way CSS and Divs work... I just don't want to work with
800 width sites for eternity trying to be compatible with older screens.

Probably the most important reason *why* tables are a bad choice for
creating a "layout" is that when used in the manner illustrated above
they do not allow proper incremental rendering. The problem of false
semantics when using tables for layout is a far less important issue.

It's a bit late, but just having a look over incremental rendering. I
know tables have worked flawlessly for me, and I've tested my results in
many browsers. I "had" "high standards". (tongue in cheek
acknowledgement that my website at http://www.blargle.co.uk is an
abomination)

It is possible to get the same behaviour with div elements, but
replacing table elements with div elements would be farcical if you then
emulate the most important problem that most table layouts suffer from.

So is there a strong will not to use tables for layout and instead use
DIV's?

The real problem here is that you want easy layouts, but what is easy
for you the author is causing nasty problems for the user. The real
solution is to make an effort to understand the problems with "size to
fit the content" layouts, and then learn to code so that you don't need
this nasty behaviour anymore.

I don't know where you got the idea that I want easy layouts... but Im
all ears when you talk about nasty problems for the user. I don't like
nasty problems. Have you got a link you can send me to that might
explain these?

I also don't believe that I want to size to fit the content. I want to
size to fit the screen and have the content adjust itself within the
confines of its container to make a website that is viewable in all
screen resolutions.

I've been working on a replacement to my abomination at:

http://www.blargle.co.uk/beta

I would be most interested to hear what nasty problems this design has?

Thanks
Simon

[VK]

Simon Dean wrote:

Here's an example of the abomination!:

http://www.blargle.co.uk/

So let's imagine that the magic happened :-) and everything is working
exactly in the way you wanted to. I'm still not exactly clear what are
these 100px "columns" (let's stick to this term for now)? You mean the
whole content as seen right now at <http://www.blargle.co.uk/has to
take all available canvas width except 200px: 100px from the left
canvas border and 100px from the right canvas border? Is it anywhere
correct?

And what will be in these 100px "columns"? I mean is it possible that
their content (if any) will overflow and what do you want to do then
(expand column, hide overflow part, add scroll bars)?

These are not some "tricky questions" with hidden context in them - I'm
just trying to figure out if there is any reliable solution for your
situation besides table layout.

[Spartanicus]

Simon Dean <sj****@simtext.plus.comwrote:

>So what *is* your excuse to start yet another CSS vs tables thread
instead of searching the group's archives?

Err.... Im not sure where you got that, but, er, I've never seen this
question answered, I've never had the question answered, and I've
searched Google Groups but unable to find again relevent questions and
answers.

Given that it took me all of 2 seconds to produce 124 results from a
search using the very subject of your post;
http://groups.google.com/groups?as_q...ng.stylesheets
it seems more likely that you didn't try.

>It's a bit late, but just having a look over incremental rendering. I
know tables have worked flawlessly for me, and I've tested my results in
many browsers.

If you are not aware of the problem then you won't recognize it with all
the testing in the world.

>It is possible to get the same behaviour with div elements, but
replacing table elements with div elements would be farcical if you then
emulate the most important problem that most table layouts suffer from.

So is there a strong will not to use tables for layout and instead use
DIV's?

Again: the issue is not tables vs css for layout, but avoiding nasty
problems such as reflows.

>The real problem here is that you want easy layouts, but what is easy
for you the author is causing nasty problems for the user. The real
solution is to make an effort to understand the problems with "size to
fit the content" layouts, and then learn to code so that you don't need
this nasty behaviour anymore.

I don't know where you got the idea that I want easy layouts... but Im
all ears when you talk about nasty problems for the user. I don't like
nasty problems. Have you got a link you can send me to that might
explain these?

Use the already provided keywords to search: incremental rendering,
browser reflows.

>I also don't believe that I want to size to fit the content. I want to
size to fit the screen and have the content adjust itself within the
confines of its container to make a website that is viewable in all
screen resolutions.

Size to fit the content is what you get with a table (unlikely cases
where that behaviour is modified excepted), it's what you are used to
and it is likely that you don't know anything else. You may not realize
that this is what you want, but you wouldn't like the results if your
layout did not behave like that. Stick a "table{table-layout:fixed}"
rule in your stylesheet and zoom the font size up and down with a
Mozilla based browser on a site that uses tables for layout to see what
I mean.

>I've been working on a replacement to my abomination at:

http://www.blargle.co.uk/beta

I would be most interested to hear what nasty problems this design has?

There is no real content there, looking at the current home page of your
site, given that the design is relatively simple combined with there
being little content, there isn't a particular layout problem. Using the
same techniques with a more complicated layout and more challenging
content would however demonstrate the issues I referred to.

Currently the main problems with your code are basic markup issues such
as lack of structure (no header element), no alt content for non
decorative images, presentational HTML etc.

--
Spartanicus

[John Hosking]

Simon Dean wrote:

Spartanicus wrote:

>Simon Dean <sj****@simtext.plus.comwrote:

>>>
Not another one...

So what *is* your excuse to start yet another CSS vs tables thread
instead of searching the group's archives?

Err.... Im not sure where you got that, but, er, I've never seen this
question answered, I've never had the question answered, and I've
searched Google Groups but unable to find again relevent questions and
answers.

He didn't mean that *you* had raised the topic a couple of times before;
he meant that the topic had been raised a couple of thousand times
before. Any reasonable attempt to research it should have provided you
with ample discussion to explain what's involved. You could just Google
for, say, "CSS vs Tables" (hope you don't mind I used your subject line)
and you'd get a good selection of Web articles on the topic. Anyway, by
saying "not another one," it makes it clear that you *know* it's an old
topic.

>>Hopefully simple though, I hate the way *I* (and it might be a CSS
trait) can't intermix fixed width divisional elements with a variable
auto expanding div???

>>>
But is there another trick with CSS?

I had the impression when I first read this, that you were maybe looking
for some way to specify, say, a width of 20em + 3px + 3px. Which would
be pretty damn useful sometimes. But you can't do it that way.

>>>
I realise that tables aren't to be used for layout etc, and Im mostly
happy with the way CSS and Divs work... I just don't want to work
with 800 width sites for eternity trying to be compatible with older
screens.

Good! I don't want to *visit* 800px-width sites for eternity. I hate
'em. I know it's my fault, though, because my browser's viewport is
almost never 800px wide. Heh. Heh heh. Seriously, what's magic about the
number 800?

>
So is there a strong will not to use tables for layout and instead use
DIV's?

I would say, there's an effort to promote the replacement (or
obsolescence) of tables for layout, and instead use /styled elements/.
If the elements have to be DIVs, then okay, but they could be what they
/are/, namely Paragraphs or H2's or whatever.

>The real problem here is that you want easy layouts, but what is easy
for you the author is causing nasty problems for the user. The real
solution is to make an effort to understand the problems with "size to
fit the content" layouts, and then learn to code so that you don't need
this nasty behaviour anymore.

I don't know where you got the idea that I want easy layouts... but Im
all ears when you talk about nasty problems for the user. I don't like
nasty problems. Have you got a link you can send me to that might
explain these?

I'm sure Spartanicus will respond to you in due course.

>
I've been working on a replacement to my abomination at:

http://www.blargle.co.uk/beta

I would be most interested to hear what nasty problems this design has?

Well, I realize it's still being built, so it isn't fair to criticise
it, but maybe I can say a couple of things that'd be helpful. Some are
more minor than others, but in no special order:

It's fixed width, and, without any content, I can't see why that'd be
useful. It certainly doesn't help me as a visitor.

You started throwing in DIVs, and then styling them, like stretchable
Lego bricks. Better, IMHO, is to create the content, then mark it up as
what it is, then style the elements you've got. For example, where
you've got a <div id="title">&nbsp;</div>, it'd probably be more
sensible to have a <h1>No title yet</h1>. Then, you can style your h1(s).

I can't really tell what your P100's are supposed to be, but the first
one looks kind of funny/broken in FF. It also has a different font size,
but I don't see why. This confusion might just be due to the "beta-ness"
of the page (although I'd say it's more "alpha").

Some of your text is set in px, so I can't change the size in IE6.

What I *can* size, doesn't look so good in your design. The text crawls
out of the boxes you've planned for them.

You need to add a float:left; to #headerrt. Or something.

I think you're making headaches for yourself by repeatedly specifying
margin and padding and border and so on on everything. Specify it once
(if you need it at all) for everything, and let the descendent elements
inherit the properties. The more complicated your CSS, the more likely
you'll mess up the layout (by overconstraining, needlessly).

Take a look at your a.green, a.red, etc. rules. Replace all that stuff
with this:

a { color: #fff;
font-family: arial; /* But hey, no fallback? */
font-weight:bold;
text-decoration: none;
padding:6px 1px;
height:18px;
float:left;
width:74px; }
a.green { background: url("greenoff.png") repeat; }
a.green:hover { background: url("greenon.png") repeat; }
a.red { background: url("redoff.png") repeat; }
a.red:hover { background: url("redon.png") repeat; }
a.yellow { background: url("yellowoff.png") repeat; }
a.yellow:hover { background: url("yellowon.png") repeat; }
a.blue { background: url("blueoff.png") repeat; }
a.blue:hover { background: url("blueon.png") repeat; }

It does the same thing, saves space, and is easy to understand.

And if you can change some of your px's to em's or %'s, you'll be
getting dangerously close to a fluid design that everyone has a chance
of enjoying.

You've got a duplicate #bodyshadeleft in the CSS. And because you
haven't set background colors, the white at the bottom of the #bodyshade
bar looks kind of funny. It doesn't match my default orange... (you'll
need to specify some font colors too).

I know some of this critique is a bit off your question (and not
requested), but I did look at your page, and I'm hoping you'll
appreciate the comments as my attempt to help (while I'm learning things
for myself).

--
John

[Simon Dean]

John Hosking wrote:

Simon Dean wrote:

>Spartanicus wrote:

>>Simon Dean <sj****@simtext.plus.comwrote:

Not another one...

So what *is* your excuse to start yet another CSS vs tables
thread instead of searching the group's archives?

Err.... Im not sure where you got that, but, er, I've never seen
this question answered, I've never had the question answered, and
I've searched Google Groups but unable to find again relevent
questions and answers.

He didn't mean that *you* had raised the topic a couple of times
before;

I didn't suggest he had said that...

he meant that the topic had been raised a couple of thousand times
before.

Judging from his link, he gave me a list of generic discussions on CSS
vs Tables rather than an answer to my particular question, which, I have
not seen answered.

My opening post was a little sarcastic, as I appreciate Tables vs CSS
has been discussed to death and there is ample discussion and examples
on the benefits of each and when to use each, together with many
examples of three column layouts. There has not yet been (as far as I
have seen), any reference to the magic second column that automagically
expands like a table might...

Any reasonable attempt to research it should have provided you with
ample discussion to explain what's involved. You could just Google
for, say, "CSS vs Tables" (hope you don't mind I used your subject
line) and you'd get a good selection of Web articles on the topic.

That is true. But CSS vs Tables is not my topic. Maybe I should have
been more specific in my subject line...

Anyway, by saying "not another one," it makes it clear that you
*know* it's an old topic.

I was trying to use a bit of sarcasm in the way intended above. I know
CSS vs Tables is an old discussion - BUT Im not looking to discuss the
merits or methods but how to achieve the two fixed outer columns with a
magically expanding second column that expands to browser window size.

>>>Hopefully simple though, I hate the way *I* (and it might be a
CSS trait) can't intermix fixed width divisional elements with
a variable auto expanding div???

>>>>
But is there another trick with CSS?

I had the impression when I first read this, that you were maybe
looking for some way to specify, say, a width of 20em + 3px + 3px.
Which would be pretty damn useful sometimes. But you can't do it that
way.

Be nice to do something like Browser Window Size - 100px - 100px

>>>I realise that tables aren't to be used for layout etc, and Im
mostly happy with the way CSS and Divs work... I just don't
want to work with 800 width sites for eternity trying to be
compatible with older screens.

Good! I don't want to *visit* 800px-width sites for eternity. I hate
'em. I know it's my fault, though, because my browser's viewport is
almost never 800px wide. Heh. Heh heh. Seriously, what's magic about
the number 800?

Oh yes. I forgot the scrollbar :-) Or of course Google Desktop. But
that's the thing... In my example, I know the size of my fixed width
outer columns, or I know the size of my fixed width links... but I
desperately don't want to make the middle column, or the space to the
side of the buttons fixed width.

>>
So is there a strong will not to use tables for layout and instead
use DIV's?

I would say, there's an effort to promote the replacement (or
obsolescence) of tables for layout, and instead use /styled
elements/. If the elements have to be DIVs, then okay, but they could
be what they /are/, namely Paragraphs or H2's or whatever.

Well yeah, I hope no one was thinking I was just talking about changing
my entire markup to DIV's only?

>I've been working on a replacement to my abomination at:

http://www.blargle.co.uk/beta

I would be most interested to hear what nasty problems this design
has?

Well, I realize it's still being built, so it isn't fair to criticise
it, but maybe I can say a couple of things that'd be helpful. Some
are more minor than others, but in no special order:

It's fixed width, and, without any content, I can't see why that'd be
useful. It certainly doesn't help me as a visitor.

I agree. I detest them. But how do I expand just certain elements to
take up remaining space when I don't know what the remaining space is?

>
You started throwing in DIVs, and then styling them, like stretchable
Lego bricks. Better, IMHO, is to create the content, then mark it up
as what it is, then style the elements you've got. For example,
where you've got a <div id="title">&nbsp;</div>, it'd probably be
more sensible to have a <h1>No title yet</h1>. Then, you can style
your h1(s).

No, those tips are very much appreciated. No reason you can't have <A>
on the same line as a <H1etc with proper CSS formatting right?

>
I can't really tell what your P100's are supposed to be, but the
first one looks kind of funny/broken in FF.

Yeah. I need to fix the graphics and add a link. It's a "Teletext"
themed website... There are four buttons red, green, yellow and blue,
they'll all be hyperlinks off to somewhere else, with mainly text in the
main content area.

There'll be some Java applets up in that light pink window that will
generate the current page number (ie with Teletext, it's all P100-P999
etc), a clock, and a page number navigation... so type in a page number
to a text box, click go, and you'll get taken there.

It also has a different font size, but I don't see why.

Still in progress. Just uploaded it for a sample - didn't get back to
late last night and physio this morning havent had a chance to do any
more tweaking.

This confusion might just be due to the "beta-ness" of the page
(although I'd say it's more "alpha").

Alpha? Very generous of you! :-)

Some of your text is set in px, so I can't change the size in IE6.

What I *can* size, doesn't look so good in your design. The text
crawls out of the boxes you've planned for them.

Is this an argument to make sure the size can't be changed, or to ensure
that when things expand, that it's container expands nicely? Sounds like
a difficult thing to do with "themed websites"...

I see many commercial websites that break if pushed beyond it's boundaries.

>
You need to add a float:left; to #headerrt. Or something.

Yeah, that was one of the things I never fixed prior to upload (amongst
everything else). I do a float:left, and then have to add a clear:both
to the #title div to force it down. But then I can't get the
#clockmiddle to expand to take up the rest of the space. 100% width just
enlarges it to it's container...

I think you're making headaches for yourself by repeatedly specifying
margin and padding and border and so on on everything.

I read something that suggested everything should be specified just in
case... then you definitely won't run into problems with some browsers...

Specify it once (if you need it at all) for everything, and let the
descendent elements inherit the properties. The more complicated your
CSS, the more likely you'll mess up the layout (by overconstraining,
needlessly).

Take a look at your a.green, a.red, etc. rules. Replace all that
stuff with this:

[snip]

Yeah... I'll be adding some content in at a later date, in which I
probably won't want white links on a white background... but I can think
about my CSS a little more in depth as things develop.

>
And if you can change some of your px's to em's or %'s, you'll be
getting dangerously close to a fluid design that everyone has a
chance of enjoying.

You've got a duplicate #bodyshadeleft in the CSS.

Whoops....

And because you haven't set background colors, the white at the
bottom of the #bodyshade bar looks kind of funny. It doesn't match my
default orange... (you'll need to specify some font colors too).

I know some of this critique is a bit off your question (and not
requested),

(but appreciated... most of it... a lot of it though is because Im just
in pre-alpha... and working out ideas...)

but I did look at your page, and I'm hoping you'll appreciate the
comments as my attempt to help (while I'm learning things for
myself).

Yeah but no but yeah but no but... No definitely appreciated.

[Martin Eyles]

"Simon Dean" <sj****@simtext.plus.comwrote in message
news:4t*************@mid.individual.net...

VK wrote:

>Simon Dean wrote:

>>>The great thing I loved with Tables, was being able to say:

<table width=90%>
<tr>
<td width=100>Left Column</td>
<td width="*">Content Here</td>
<td width=100>Right Column</td>
</tr>
</table>

May I ask what browser did you enjoy this layout on?

I don't know. I can't remember. I've been coding like that a long time. I
like the way that I can just make the content fill out the entire screen
as necessary, making it viewable on 640x480, 800x600, 1024x768 etc...
That's all I want to achieve using DIV's and CSS but without JavaScript...

I have not yet seen a solution.

I threw this together in a few minutes, and it does what your table
attempts, using divs and css. Very unrefined, but appears to work in IE6,
IE7 & Firefox 2.

<html>
<head>
<title>3 columns</title>
<style>
body {margin: 0 5%}
#left, #right {width: 100px}
#left {float: left}
#right {float: right}
#content {margin: 0 100px}
</style>
</head>
<body>
<div id="left">This will be on the left - 100px wide</div>
<div id="right">This will be on the right - 100px wide</div>
<div id="content">This is the content in the middle - Fluid width. Just to
demo this here is a load of padding text to make the column a bit wider, and
make it overflow onto a new line, not encroaching into the side
columns.</div>
</body>
</html>

There are plenty of other more refined examples on the internet. I did a
google search for 3 column css

http://www.google.com/search?q=3+column+css

The top site here is

http://css-discuss.incutio.com/?page=ThreeColumnLayouts

which lists a lot of articles on the techniques used, along with a few
notes. The pages with "Liquid center" specified in the left column are
probably going to be of most interest to you.

By the way, this site uses tables for their intended purpose - displaying
tabular data.

HTH,
Martin

[Bergamot]

Simon Dean wrote:

>
There has not yet been (as far as I
have seen), any reference to the magic second column that automagically
expands like a table might...

You didn't look very hard. There are many 3-column templates that do
this, several are listed at
http://css-discuss.incutio.com/?page=ThreeColumnLayouts

--
Berg

[Simon Dean]

Martin Eyles wrote:

"Simon Dean" <sj****@simtext.plus.comwrote in message
news:4t*************@mid.individual.net...

>I have not yet seen a solution.

I threw this together in a few minutes, and it does what your table
attempts, using divs and css. Very unrefined, but appears to work in
IE6, IE7 & Firefox 2.

[snip]

JC! Thanks! Exactly what I was looking for. You're my hero! How can I
repay you?

>
There are plenty of other more refined examples on the internet. I
did a google search for 3 column css

http://www.google.com/search?q=3+column+css

Don't know what I was searching for... Maybe "table css relative *
width" was too off the wall?

>
The top site here is

http://css-discuss.incutio.com/?page=ThreeColumnLayouts

which lists a lot of articles on the techniques used, along with a
few notes. The pages with "Liquid center" specified in the left
column are probably going to be of most interest to you.

By the way, this site uses tables for their intended purpose -
displaying tabular data.

HTH, Martin

It does. Thank you very much. I note that the right hand column comes
before the centre column. And it works with less text too!

It doesn't pay to just know syntax - but to know the right order of
these things too! :-)

Thanks much for the links and the helps!

Simon

[Spartanicus]

John Hosking <Jo**@DELETE.Hosking.name.MUNGEDwrote:

>I had the impression when I first read this, that you were maybe looking
for some way to specify, say, a width of 20em + 3px + 3px. Which would
be pretty damn useful sometimes. But you can't do it that way.

Indirectly you can by specifying a width in em combined with a left
and/or right padding in px. This results in a width of Xem + Ypx due to
CSS box model rules. In instances where you don't actually want the
padding you can then use a negative margin on the box's content wrapper
to correct that.

--
Spartanicus

[Martin Eyles]

"Simon Dean" <sj****@simtext.plus.comwrote in message
news:4t*************@mid.individual.net...

Martin Eyles wrote:

>"Simon Dean" <sj****@simtext.plus.comwrote in message
news:4t*************@mid.individual.net...

>>I have not yet seen a solution.

I threw this together in a few minutes, and it does what your table
attempts, using divs and css. Very unrefined, but appears to work in
IE6, IE7 & Firefox 2.

[snip]

JC! Thanks! Exactly what I was looking for. You're my hero! How can I
repay you?

No Problem.

>There are plenty of other more refined examples on the internet. I
did a google search for 3 column css

http://www.google.com/search?q=3+column+css

Don't know what I was searching for... Maybe "table css relative *
width" was too off the wall?

Yes - The art of searching is knowing what to search for

>The top site here is

http://css-discuss.incutio.com/?page=ThreeColumnLayouts

which lists a lot of articles on the techniques used, along with a
few notes. The pages with "Liquid center" specified in the left
column are probably going to be of most interest to you.

By the way, this site uses tables for their intended purpose -
displaying tabular data.

HTH, Martin

It does. Thank you very much. I note that the right hand column comes
before the centre column. And it works with less text too!

It doesn't pay to just know syntax - but to know the right order of
these things too! :-)

This is a flaw of the method I used. I think there are techniques where
order doesn't matter. Worth scouring the above links to find these.

Thanks much for the links and the helps!

Simon

Glad it works for you.

[Beauregard T. Shagnasty]

Simon Dean wrote:

It does. Thank you very much. I note that the right hand column comes
before the centre column. And it works with less text too!

Some feel that it is more appropriate to have the content appear first
in the source, for search engines. It could be an advantage if they
don't have to read your menu, links, and possible repeating sidebar on
every page before getting to the "meat" of the page.

See this one; content is first, menu and sidebar last.
http://benmeadowcroft.com/webdev/css.../3-column.html

--
-bts
-Motorcycles defy gravity; cars just suck

[John Hosking]

Spartanicus wrote:

John Hosking wrote:

>>I had the impression when I first read this, that you were maybe looking
for some way to specify, say, a width of 20em + 3px + 3px. Which would
be pretty damn useful sometimes. But you can't do it that way.

Indirectly you can by specifying a width in em combined with a left
and/or right padding in px. This results in a width of Xem + Ypx due to
CSS box model rules. In instances where you don't actually want the
padding you can then use a negative margin on the box's content wrapper
to correct that.

Ah, very cute. Thanks.

--
John

[dorayme]

In article <4t*************@mid.individual.net>,
Simon Dean <sj****@simtext.plus.comwrote:

Martin Eyles wrote:

"Simon Dean" <sj****@simtext.plus.comwrote in message
news:4t*************@mid.individual.net...

I have not yet seen a solution.

I threw this together in a few minutes, and it does what your table
attempts, using divs and css. Very unrefined, but appears to work in
IE6, IE7 & Firefox 2.

[snip]

JC! Thanks! Exactly what I was looking for. You're my hero! How can I
repay you?

It is quite surprising how effective some direct spoonfeeding can
be! There should be more of it.

--
dorayme

[Gérard Talbot]

Simon Dean wrote :

Have you got a link you can send me to that might
explain these?

Table-based webpage design versus CSS-based webpage design: resources
http://www.gtalbot.org/NvuSection/Nv...CSSDesign.html
Best resource in my opinion is:
Why tables for layout is stupid. Problems defined, solutions offered.
http://www.hotdesign.com/seybold/

Why should I use CSS layouts over tables?
http://www.html-faq.com/csspositioning/?csslayout

Gérard
--
remove blah to email me

[Gérard Talbot]

Simon Dean wrote :

[snipped]

There has not yet been (as far as I
have seen), any reference to the magic second column that automagically
expands like a table might...

3 Column Layout
http://examples.tobyinkster.co.uk/3col

[snipped]
(...)

but how to achieve the two fixed outer columns with a
magically expanding second column that expands to browser window size.

Skidoo : 2 or 3 Column Layout
http://webhost.bridgew.edu/etribou/l...doo/index.html

Gérard
--
remove blah to email me

[Gérard Talbot]

Simon Dean wrote :

[snipped]

There has not yet been (as far as I
have seen), any reference to the magic second column that automagically
expands like a table might...

The "I can't believe it's not a table!" layout
http://www.positioniseverything.net/threecolbglong.html
[snipped]

but how to achieve the two fixed outer columns with a
magically expanding second column that expands to browser window size.

Three Column Stretch (header)
http://www.positioniseverything.net/...l.stretch.html
Simon, there are **lots** of webpages implementing what you were looking
for with divs (instead of table) with the central column being
stretchable/expandable/shrinkable.

You have a choice between resorting to floats or to go with abs.
positioning: both choices can have/imply some problems with some browser.

E.g.: if you use floats, you'll have to use some hacks for IE 5, IE6 and
IE7 since many float bugs have not been fixed yet. If you use abs. pos.,
then IE users will have considerable problems with text selecting (which
I think is less of a problem than having to endure with hacks for
floats... just my opinion).

Gérard
--
remove blah to email me

[Gérard Talbot]

Bergamot wrote :

Simon Dean wrote:

>There has not yet been (as far as I
have seen), any reference to the magic second column that automagically
expands like a table might...

You didn't look very hard.

I also think it's fair to say that Simon did not look very hard.

There are many 3-column templates that do
this, several are listed at
http://css-discuss.incutio.com/?page=ThreeColumnLayouts

Some (many?) of these 3-column templates are debattable, questionable.
Some do not use valid markup code; some use rather ugly hacks; some even
rely on javascript. That page mentions "The judgment of 'good' is left
to you and your needs. Each offers interesting techniques for the CSS
student."

In my opinion, many web developers are being "blocked", stuck with IE 6
and IE 7 browser versions which can not render some CSS templates
accordingly due to IE bugs and some hacks are unavoidable. Microsoft is
to be blamed entirely for this very deplorable and frustating situation.

Gérard
--
remove blah to email me

[Saul]

It does. Thank you very much. I note that the right hand column comes

before the centre column. And it works with less text too!

Some feel that it is more appropriate to have the content appear first
in the source, for search engines. It could be an advantage if they
don't have to read your menu, links, and possible repeating sidebar on
every page before getting to the "meat" of the page.

See this one; content is first, menu and sidebar last.
http://benmeadowcroft.com/webdev/css.../3-column.html

Style sheets with absolute positioning cause lots of problems in
small-format browsers as text and images will run into one another on
small screens or shrunken windows and for me really ought to be avoided
- unreadable text is as inaccessible as badly marked up text.

If you don't use absolute positioning then you have to have the 'wrong'
semantic order to the page to get floats to work correctly. This is
style imposing constraints on content when the two really should be
totally separate. I'm hoping that at some point in the future this CSS
feature/bug will be corrected for, but until then floats remain a
layout hack as much as tables are a layout hack, and in some
circumstances the table hack is better than the CSS equivalent hack.
Saul
www.notanant.com

[Andy Dingley]

VK wrote:

May I ask what browser did you enjoy this layout on? Definitely not on
NN3/IE3 or NN4/IE4 :

While what you say is true, it's so thoroughly obsolete to be of no
remaining interest. Who cares about NS4 ?

[Bergamot]

Saul wrote:

>
If you don't use absolute positioning then you have to have the 'wrong'
semantic order to the page to get floats to work correctly.

Not true. You probably just need an additional container somewhere.

--
Berg

[Saul]

Bergamot wrote:

Saul wrote:

If you don't use absolute positioning then you have to have the 'wrong'
semantic order to the page to get floats to work correctly.

Not true. You probably just need an additional container somewhere.

I'd be interested in a demonstration. We've tried all sorts to get this
type of approach to work and with absolute posiitiong we always have
run into problems with text running into images or text running into
text as the page size decreases (as the previous example link
demonstrates). Things like min-width and max-width aren't safe across
browsers and so can't be used.

Saul
www.notanant.com

[Bergamot]

Saul wrote:

Bergamot wrote:

>Saul wrote:

>
If you don't use absolute positioning then you have to have the 'wrong'
semantic order to the page to get floats to work correctly.

Not true. You probably just need an additional container somewhere.

I'd be interested in a demonstration. We've tried all sorts to get this
type of approach to work and with absolute posiitiong

I was referring to using floated containers, not absolute positioning.
There are already 3 column templates out there that use the "correct"
semantic order. Some are no doubt listed at
http://css-discuss.incutio.com/?page=ThreeColumnLayouts

--
Berg

[VK]

Bergamot wrote:

I was referring to using floated containers, not absolute positioning.
There are already 3 column templates out there that use the "correct"
semantic order. Some are no doubt listed at
http://css-discuss.incutio.com/?page=ThreeColumnLayouts

So is there a single layout in there you would suggest into commercial
production? I tried 6 of them going from the top and then 3 more by
random choice. All 9 have at least one un-acceptable default (not
talking about combinations):
1) ugly as hell on font size change in at least one of major UAs
2) locking font size change in at least one of major UAs
3) simply ugly with any font size
4) totally obfuscated DIV-soup where any JAWS will loose its teeth.

I'm not saying the list doesn't have a perfect layout: but could you
point to it?

[Bergamot]

VK wrote:

>
I'm not saying the list doesn't have a perfect layout: but could you
point to it?

I'm not inclined to do your research for you, at least not for free.

--
Berg

[Bergamot]

Bergamot wrote:

VK wrote:

>>
I'm not saying the list doesn't have a perfect layout: but could you
point to it?

I'm not inclined to do your research for you, at least not for free.

re: http://css-discuss.incutio.com/?page=ThreeColumnLayouts

I decided to spoon feed you after all. After scanning the descriptions
(you apparently didn't bother reading them), I found one that does what
Saul said couldn't be done using floats. Took all of 20 seconds to spot.
http://www.ground.cz/luci/css/my3cols.html

Please, before you start complaining about its vast number of flaws and
deficiencies, use a little common sense. Those templates are mostly
intended to be used as guides, not taken as is unmodified. They are
learning tools. Use them as such.

If you don't have the imagination to replace px widths with ems or
change other CSS rules to your own liking, then you need a lot more help
than I am willing to give.

--
Berg

[Saul]

Bergamot wrote:

Bergamot wrote:

VK wrote:

>
I'm not saying the list doesn't have a perfect layout: but could you
point to it?

I'm not inclined to do your research for you, at least not for free.

re: http://css-discuss.incutio.com/?page=ThreeColumnLayouts

I decided to spoon feed you after all. After scanning the descriptions
(you apparently didn't bother reading them), I found one that does what
Saul said couldn't be done using floats. Took all of 20 seconds to spot.
http://www.ground.cz/luci/css/my3cols.html

Thanks for the pointer, but this still has a float bug. Try making the
window on the screen smaller (both IE6 and Firefox)- you get the left
column floating over the main text. Also on a PDA the page breaks and
requires scrolling to see the main area. For that reason I'm not sure
that negative margins are any better than absolute positioning. I'll
keep looking for a clean fullproof solution, but I still don't think it
exists.
Saul
www.notanant.com

[Bergamot]

Saul wrote:

Bergamot wrote:

>re: http://css-discuss.incutio.com/?page=ThreeColumnLayouts

http://www.ground.cz/luci/css/my3cols.html

Thanks for the pointer, but this still has a float bug. Try making the
window on the screen smaller (both IE6 and Firefox)- you get the left
column floating over the main text.

So if that one doesn't strike your fancy go look for another one from
the list. There are some good templates in there, but I'm not going to
do your research for you.

Also on a PDA the page breaks

That's easily solved by using @media rules. Use some imagination and
look beyond what is immediately there. You'll see the possibilities
start revealing themselves. Examine the techniques used and learn from
them. That's what those templates are really for, anyway.

For that reason I'm not sure
that negative margins are any better than absolute positioning.

Absolute positioning has more serious drawbacks, IMO.

I'll
keep looking for a clean fullproof solution, but I still don't think it
exists.

Sure it does, but it sounds like you want to be spoon fed all the answers.

--
Berg

[Saul]

Bergamot wrote:

Saul wrote:

Bergamot wrote:

re: http://css-discuss.incutio.com/?page=ThreeColumnLayouts

http://www.ground.cz/luci/css/my3cols.html

Thanks for the pointer, but this still has a float bug. Try making the
window on the screen smaller (both IE6 and Firefox)- you get the left
column floating over the main text.

So if that one doesn't strike your fancy go look for another one from
the list. There are some good templates in there, but I'm not going to
do your research for you.

Also on a PDA the page breaks

That's easily solved by using @media rules. Use some imagination and
look beyond what is immediately there. You'll see the possibilities
start revealing themselves. Examine the techniques used and learn from
them. That's what those templates are really for, anyway.

For that reason I'm not sure
that negative margins are any better than absolute positioning.

Absolute positioning has more serious drawbacks, IMO.

I'll
keep looking for a clean fullproof solution, but I still don't think it
exists.

Sure it does, but it sounds like you want to be spoon fed all the answers.

Odd attitude for newsgroups. You're not the first person to say 'oh yes
it exists' and then not be able to demonstrate a proper working CSS
example. What we're looking for is something which most site designers
want so it should be a pretty simply thing to find if it was easy and
anyone was doing it (and it would be of interest to a wide variety of
readers here). Since it's hard to get a proper answer it leaves me to
question whether the answer exists.
Saul