3 column layout problems -- is there a solution without tables?

[kaeli]

I have had a little free time lately to revisit a problem I have with the 3
column layout plus a header and footer.

See this example:
http://glish.com/css/7.asp

There is a header and 3 columns. Pretend there's a footer at the bottom, too.
:)

Here are the issues I have been unable to solve without tables _somewhere_
(even if it's just one containing table):

1. Increase the font size twice. You'll see that the text now overflows the
layers and looks like hell.

2. Make the window smaller. The layers eventually overlap each other instead
of the browser displaying a scroll bar.

3. Take that example and in any of the columns, put something that doesn't
fit. A wide table, large image, a bunch of letters with no spaces, or
something unsplittable like that. It overflows the div instead of stretching
as a table would.

The "solutions" I have found to these issues have broken other things. For
example, if you make one or two of the divs float, when the window is too
small for all 3 to be next to each other, they wrap to the bottom. Ick.
This gets even worse when you start nesting things inside. If you force a
font size, that prevents users from being able to read the page if they are
visually impaired. And so on.

Has anyone found/wrote CSS that will behave as nicely as tables do for layout
in situations like this? I assume it would be rather ugly and complicated
with several nested layers, but I have yet to figure out a design (cross-
browser 3 column plus header/footer) that doesn't eventually break from
something, whether it be putting something too large inside, changing the
window size, or increasing the font size.
Keep in mind that I don't want scroll bars inside the divs. They should
stretch like table cells do. Resizing, content, and other such things should
not break it.

--
--
~kaeli~
A boiled egg in the morning is hard to beat.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

[Lars Eighner]

In our last episode,
<MP************************@nntp.lucent.com>, the lovely and
talented kaeli broadcast on
comp.infosystems.www.authoring.stylesheets:

Has anyone found/wrote CSS that will behave as nicely as tables do for layout
in situations like this? I assume it would be rather ugly and complicated
with several nested layers, but I have yet to figure out a design (cross-
browser 3 column plus header/footer) that doesn't eventually break from
something, whether it be putting something too large inside, changing the
window size, or increasing the font size.
I think it has been shown to be impossible by someone. And
after all, everything will break if you open in Netscape 4.x
and resize your window to 253x489.

I really like skidoo_too, although it takes lots of hacks (of
which I seem to have broken many). The main thing is, it puts
the middle column first, so a page reads right (content first)
if you turn off styles or use a text browser. That allows you
to make the HTML document unbroken. The business of having to
munge your sound HTML document to make it fit some style is
clearly backwards - and degrading gracefully to text mode is
worth something.

It seems to me the theory of skidoo_too is right: basically
it swells the left and right *borders* of the main, and puts
the sidebars on the borders. And that really is what 3col
with header and footer is - the sidebars, header, and footer
really are borders of the main.

Keep in mind that I don't want scroll bars inside the divs. They should
stretch like table cells do. Resizing, content, and other such things should
not break it.

I don't think that is really possible in the extreme. Extreme
shrinking will, after, break even 1col docs.

--
Lars Eighner ei*****@io.com http://www.larseighner.com/
War on Terrorism: Bad News from the Sanity Front
"Tactical nuclear capabilities should be used against the bin Laden
camps in the desert of Afghanistan." -Thomas Woodrow,_Washington Times_

[Beauregard T. Shagnasty]

kaeli wrote:

Has anyone found/wrote CSS that will behave as nicely as tables do
for layout in situations like this?
Sure.

Scroll down and pick the "Three Columns with Footer".
<http://webhost.bridgew.edu/etribou/layouts/index.html>
This layout puts the two sidebars linearly ahead of the content, which
I would rather avoid.

Toby Inkster's 3-col puts the content first in the HTML, but a footer
must be within the content column. Not too bad, actually.
<http://home.rochester.rr.com/bshagnasty/test/3colcssbytoby.html>
With a footer:
<http://home.rochester.rr.com/bshagnasty/test/stale.html>
I assume it would be rather ugly and complicated with several
nested layers,
Certainly less complicated and ugly than a bunch of nested tables.
but I have yet to figure out a design (cross- browser 3 column plus
header/footer) that doesn't eventually break from something,
whether it be putting something too large inside, changing the
window size, or increasing the font size.

There is probably no solution that won't break in some fashion. Even
tables break when you try to, for example, view on some mobile phones
or PDAs. These CSS layouts should solve that problem.

--
-bts
-This space intentionally left blank.

[kaeli]

In article <3a*************@individual.net>, a.*********@example.invalid
enlightened us with...

Scroll down and pick the "Three Columns with Footer".
<http://webhost.bridgew.edu/etribou/layouts/index.html>
This layout puts the two sidebars linearly ahead of the content, which
I would rather avoid.

I would, too.
Content-wise, it should be
-header
-left
-content
-right
-footer
(I often put navigation on the left, so it should display first)
Toby Inkster's 3-col puts the content first in the HTML, but a footer
must be within the content column.
That's the problem.
It should not be. It's a footer and the actual html content should be last in
case CSS is turned off.
<http://home.rochester.rr.com/bshagnasty/test/3colcssbytoby.html>
With a footer:
<http://home.rochester.rr.com/bshagnasty/test/stale.html>
That's not overly nice.
A footer should be just like the header. Except at the bottom.

I assume it would be rather ugly and complicated with several
nested layers,
Certainly less complicated and ugly than a bunch of nested tables.

That's debatable. I can do the tables in 5 minutes. ;)

There is probably no solution that won't break in some fashion. Even
tables break when you try to, for example, view on some mobile phones
or PDAs. These CSS layouts should solve that problem.

That would be one of the reasons I want to move to CSS. The other is because
of text to speech browsers that can't handle table layouts. I know everything
can break, but I'd prefer it not be so easy to do as common actions like
resizing.

--
--
~kaeli~
Is it possible to be totally partial?
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

[kaeli]

In article <sl*********************@goodwill.io.com>, ei*****@io.com
enlightened us with...

I don't think that is really possible in the extreme. Extreme
shrinking will, after, break even 1col docs.

I'm not talking extremes.
I'm talking normal user action (and those still stuck with 600x400) and
allowing the user to customize their browser (such as having the sidebar
open, extra plugins or toolbars that take up browser window space, or
whatnot) without my page suffering from it.
If some guy needs the font-size on the largest setting it goes to in order to
read the screen, I don't want it killing my layout.
You know?

I'm not looking for perfection any more than I already have with tables.

--
--
~kaeli~
Murphy's Law #2030: If at first you don't succeed, destroy
all evidence that you tried.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

[Beauregard T. Shagnasty]

kaeli wrote:

In article <3a*************@individual.net>,
a.*********@example.invalid enlightened us with...

Scroll down and pick the "Three Columns with Footer".
<http://webhost.bridgew.edu/etribou/layouts/index.html> This
layout puts the two sidebars linearly ahead of the content, which
I would rather avoid.
I would, too. Content-wise, it should be
-header
-left

Except for visitors using readers, who probably don't want to listen
to the navigation over and over again. I like content first.
-content
-right
-footer
(I often put navigation on the left, so it should display first)

Display yes, but not to be read aloud.

Toby Inkster's 3-col puts the content first in the HTML, but a
footer must be within the content column.

That's the problem. It should not be. It's a footer and the actual
html content should be last in case CSS is turned off.

I agree, and we were trying to figure out how to get the footer below,
in Toby's layout. Not successful, so far.

<http://home.rochester.rr.com/bshagnasty/test/3colcssbytoby.html>
With a footer:
<http://home.rochester.rr.com/bshagnasty/test/stale.html>

That's not overly nice. A footer should be just like the header.
Except at the bottom.

I assume it would be rather ugly and complicated with several
nested layers,

Certainly less complicated and ugly than a bunch of nested
tables.

That's debatable. I can do the tables in 5 minutes. ;)

I can do 3-col CSS in .. two minutes. <lol>

There is probably no solution that won't break in some fashion.
Even tables break when you try to, for example, view on some
mobile phones or PDAs. These CSS layouts should solve that
problem.

That would be one of the reasons I want to move to CSS. The other
is because of text to speech browsers that can't handle table
layouts. I know everything can break, but I'd prefer it not be so
easy to do as common actions like resizing.

Resizing doesn't break either of the samples above ... they both seem
to work rather well down to about 550-600 px wide, or with text
resized to 130% or so. There are practical limits, of course.

--
-bts
-This space intentionally left blank.

[kaeli]

In article <3a*************@individual.net>, a.*********@example.invalid
enlightened us with...

Except for visitors using readers, who probably don't want to listen
to the navigation over and over again. I like content first.

I don't suppose you can recommend a good reader I can install so I can
experience sites that way to see what's it's like?
I'm doing this all on a what-I-like notion, and everyone is a little
different. Doubly-so when using a whole 'nother UA.

I don't like navigation last (i.e. on the bottom) when I'm browsing, but I
suppose if I heard it over and over I'd get tired of it pretty quick.

That's the problem. It should not be. It's a footer and the actual
html content should be last in case CSS is turned off.

I agree, and we were trying to figure out how to get the footer below,
in Toby's layout. Not successful, so far.

Other than that, I liked the layout and it didn't break with "normal" usage
like resizing text and stuff.

It's pretty simple to do a header/content/footer layout with CSS that works
well. Even header/2 column/footer I got working nicely. It's just the 3
column one I can't seem to get. I'm glad other people haven't gotten it yet
if only because that means I'm not as dumb as I was thinking.
Don't say it. :p

--
--
~kaeli~
A lot of money is tainted - It taint yours and it taint mine.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

[Jim Moe]

>

Here are the issues I have been unable to solve without tables _somewhere_
(even if it's just one containing table):

There is another problem with IE (5.5 and 6, but not 5.0) that is not
obvious in your example. If the 3-column layout is placed inside another
div with "position:relative", IE places the first column inside the second
column's left border instead of the containing div's left border.

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

[Beauregard T. Shagnasty]

kaeli wrote:

In article <3a*************@individual.net>,
a.*********@example.invalid enlightened us with...

Except for visitors using readers, who probably don't want to
listen to the navigation over and over again. I like content
first.
I don't suppose you can recommend a good reader I can install so I
can experience sites that way to see what's it's like? I'm doing
this all on a what-I-like notion, and everyone is a little
different. Doubly-so when using a whole 'nother UA.

Don't have any aural browsers installed myself; I tend to rely on what
a text-only browser will display. The Lynx viewer will give you a good
approximation of what a reader will read (and what the Googlebot will
index):
http://www.delorie.com/web/lynxview.html
...or Opera, which has several non-graphical display modes.
I don't like navigation last (i.e. on the bottom) when I'm
browsing, but I suppose if I heard it over and over I'd get tired
of it pretty quick.

In a graphical display, it doesn't matter where in the linear order of
the HTML the nav links appear, so long as you display them in the
visual browser where you like them, usually on the left.

That's the problem. It should not be. It's a footer and the
actual html content should be last in case CSS is turned off.

I agree, and we were trying to figure out how to get the footer
below, in Toby's layout. Not successful, so far.

Other than that, I liked the layout and it didn't break with
"normal" usage like resizing text and stuff.

It's pretty simple to do a header/content/footer layout with CSS
that works well. Even header/2 column/footer I got working nicely.
It's just the 3 column one I can't seem to get. I'm glad other
people haven't gotten it yet if only because that means I'm not as
dumb as I was thinking. Don't say it. :p

For some reason, the 3-col has an elusive solution. 2-col is simple to
put header/content/nav/footer in linear order.

--
-bts
-This space intentionally left blank.