3 column css without ugly hack?

[Zak McGregor]

Hi all

I have a simple 3 column css layout here:
http://www.carfolio.com/newlook.dhtml

However, when the centre column is wider than the screen (yes, it does
happen on some pages on the site and no it can't happen differently) then
the 3rd column overlays itself over the middle column's content. Is there
a css-based 3 column layout without ugly hacks that will give me a 3rd
column as far to the right as need be? Can anyone suggest a fix for the
current design so that this won't happen please?

Thanks a lot for any help/pointers here...

Ciao

Zak

--
================================================== ======================
http://www.carfolio.com/ Searchable database of 10 000+ car specs
Auctioning motoring-related items at eBay? http://www.carfolio.com/ebay/
================================================== ======================

[CJM]

I would take a look at one of the stock layouts from:

http://www.thenoodleincident.com/tut...son/boxes.html
http://glish.com/css/
http://www.inknoise.com/experimental/layoutomatic.php
http://www.bluerobot.com/web/layouts/

I can't remember which one I used, but the result is at
http://www.aif-advocacy.org.uk
(not finished yet, but has 3 columns as required)

I had a real problem coding mine from scratch... some of the finer subtletys
are clearly stilllost on me, so I then decided to plageurise an existing
design... so I would recommend the same to you.

hth

Chris

[Heinrich Damm]

On Tue, 11 Nov 2003 16:11:11 -0000, "CJM" <cj*****@yahoo.co.uk> wrote:

I would take a look at one of the stock layouts from:

http://www.thenoodleincident.com/tut...son/boxes.html
http://glish.com/css/
http://www.inknoise.com/experimental/layoutomatic.php
http://www.bluerobot.com/web/layouts/

--- snip ---

Chris

Hi Zak.
I also searched for a 3column design and came up with those links
Chris mentioned. But all those designs have the following drawbacks:
- resize your browser to a width of 200-300. See what I mean? Mostly
the rightmost column is overlapped by the middle one.
- resize your browser to >1100. Now the middle column is so big, that
I have problems reading a text with those long lines.

So my solution is inspired by
http://www.wpdfd.com/editorial/wpd0403b.htm
Maybe this is what you were looking for?

Not all of my pages have this design yet, but you can look at:
http://www.hdamm.de/buddha/ahthwtpr.php
Oh - sorry - but they are in German language ;-)

--
Hope this helps.
hd

[Christoph Paeper]

*Zak McGregor* <za*@mighty.co.za>:

I have a simple 3 column css layout here:
http://www.carfolio.com/newlook.dhtml
You have some broad tables there, thus you really shouldn't want to display
three columns at once, except maybe on extraordinary broad windows. Put the
Feedback part at the bottom, the Quick Search above the Adverts and move the
Advanced Search to a separate page linked from the Quick Search section.
Better yet, put the search into the top navbar. Feedback is linked there
too, so I don't see the need to pollute all pages with the form.

For that reasons I've not even looked into your CSS.
However, when the centre column is wider than the screen (yes, it does
happen on some pages on the site and no it can't happen differently) then
the 3rd column overlays itself over the middle column's content.
It does happen all the time here.
Is there a css-based 3 column layout without ugly hacks that will give
me a 3rd column as far to the right as need be?

<table id="layout"><tr><td>1<td>2<td>3</tr></table>

Your current outline (headings plus divs plus tables) is

div.box
div.header
Carfolio
div.navbar
ul
div.columns
div.leftpane.innerleft
Specifications
Adverts
Newsletter
Advanced search
div.middlepane.innermid
table.comp
div.rightpane.innerright
Quick Search
Feedback
div.clear

I don't know, but maybe div.columns should include div.rightpane.innerright?

Anyhow, it translates into something like

<table id="layout" class="box"><thead>
<tr class="header"><td colspan="3"><h1>Carfolio</h1></td></tr>
<tr class="navbar"><td colspan="3"><ul/></td></tr>
</thead><tbody class="columns"><tr>
<td class="leftpane innerleft">
<div><h3>Specifications</h3></div>
<div><h3>Adverts</h3></div>
<div><h3>Newsletter</h3></div>
<div><h3>Advanced search</h3></div>
</td>
<td class="middlepane innermid">
<table class="comp"/>
</td>
</tbody><tbody>
<td class="rightpane innerright">
<div><h3>Quick Search</h3></div>
<div><h3>Feedback</h3></div>
</td>
</tr></tbody></table>

(about 40 bytes more than with divs, keeping the classes) to which you could
apply

table#layout, table#layout>*, table#layout>*>tr,
table#layout>*>tr>* {display: block}

and then position it with CSS in modern browsers, if you really wanted to.

Btw.: "m²" looks better and is shorter than "m²" and torque isn't
measured in nanometres but Newton·metre (N·m) or kg·m²/s². Yes, "²" and "³"
are in Latin-1.

Tip: tbody>tr:hover, tbody>tr:hover>td {background: #F0F0F0}

--
Nothing is lost until you begin to look for it.

[Zak McGregor]

On Tue, 11 Nov 2003 20:24:48 +0200, Christoph Paeper <"Christoph Paeper"
<cr***********@gmx.net>> wrote:

Btw.: "m²" looks better and is shorter than "m²" and torque
isn't measured in nanometres but Newton·metre (N·m) or kg·m²/s². Yes,
"²" and "³" are in Latin-1.

I guess you can see how those characters show up on my system... I'll
stick to the "uglier" way that at least works on my setup...

Thanks for the Nm spot though, that was bad of me! ;-)

Ciao

Zak

--
================================================== ======================
http://www.carfolio.com/ Searchable database of 10 000+ car specs
Auctioning motoring-related items at eBay? http://www.carfolio.com/ebay/
================================================== ======================

[Christoph Paeper]

*Zak McGregor* <za*@mighty.co.za>:

On Tue, 11 Nov 2003 20:24:48 +0200, Christoph Paeper

Btw.: "m²" looks better and is shorter than "m²"
I guess you can see how those characters show up on my system...

Actually I don't. Maybe your news-reader has a problem with displaying
characters from the upper half of ISO-8859-1, although it's resending it
just fine, but that shouldn't be the case for your browser, except when it's
a rather old one on the Mac
<http://ppewww.ph.gla.ac.uk/~flavell/iso8859/iso8859-mac.html>.
I'll stick to the "uglier" way that at least works on my setup...

"&sup2;", "²", "&#xB2;" and "²" or "&sup3;", "³", "&#xB3;" and "³"
respectively should all work well in browsers. Decimal numeric character
references are traditionally best supported, though.

--
"For every human problem, there is a neat, simple solution;
and it is always wrong." H. L. Mencken

[Zak McGregor]

On Wed, 12 Nov 2003 12:27:57 +0200, Christoph Paeper <"Christoph Paeper"
<cr***********@gmx.net>> wrote:

*Zak McGregor* <za*@mighty.co.za>:

On Tue, 11 Nov 2003 20:24:48 +0200, Christoph Paeper

Btw.: "m²" looks better and is shorter than "m²"

I guess you can see how those characters show up on my system...

Actually I don't. Maybe your news-reader has a problem with displaying
characters from the upper half of ISO-8859-1, although it's resending it
just fine, but that shouldn't be the case for your browser, except when
it's a rather old one on the Mac
<http://ppewww.ph.gla.ac.uk/~flavell/iso8859/iso8859-mac.html>.

I suspect it has something to do with what fonts are available on my
system. No matter what the browser/newsreader tries to do, if the fontset
doesn't have the requisite character, I don't think it'll display as
expected.

I'll stick to the "uglier" way that at least works on my setup...

"&sup2;", "²", "&#xB2;" and "²" or "&sup3;", "³", "&#xB3;" and
"³" respectively should all work well in browsers. Decimal numeric
character references are traditionally best supported, though.

Again, I think it is a factor of browser support and font availability. I
have the basic X fonts, plus a few that AbiWord installed. As I hate
proportional-width fonts my newsreader is set to use fixed-width fonts.
(clean & fixed in this case.) My browsers (Mozilla & Firebird) have their
own fonts AFAIK and I didn't mess with their defaults.

I also don't think that terminal-based browsers such as lynx would handle
these well (again, also dependent on the specifics of the locale settings
and available fonts I would imagine).

I tried this in lynx and got not-very-nice results:
http://www.obviously.com/browsers/iso-8859-1.html

Ciao

Zak

--
================================================== ======================
http://www.carfolio.com/ Searchable database of 10 000+ car specs
Auctioning motoring-related items at eBay? http://www.carfolio.com/ebay/
================================================== ======================

[Zak McGregor]

On Wed, 12 Nov 2003 13:14:53 +0200, Zak McGregor <"Zak McGregor"
<za*@mighty.co.za>> wrote:

I tried this in lynx and got not-very-nice results:
http://www.obviously.com/browsers/iso-8859-1.html

Actually I am incorrect. It displayed them all perfectly as far as I can
see - I was comparing table 1 to table 2 ;-)

Ciao

Zak

--
================================================== ======================
http://www.carfolio.com/ Searchable database of 10 000+ car specs
Auctioning motoring-related items at eBay? http://www.carfolio.com/ebay/
================================================== ======================

[Alan J. Flavell]

On Wed, 12 Nov 2003, Zak McGregor wrote:

I also don't think that terminal-based browsers such as lynx would handle
these well
That's unfair. Lynx's support for character codings, including
Unicode, is excellent.

If Lynx is properly set up, then it can do a fine job.

If it's not working properly, then either the terminal environment
has been wrongly set, or Lynx has not been properly informed of what
it is.
(again, also dependent on the specifics of the locale settings
and available fonts I would imagine).
Oh, sure. No browser can do better than the display situation in
which it finds itself!
I tried this in lynx and got not-very-nice results:
http://www.obviously.com/browsers/iso-8859-1.html

The valid parts of the page work fine for me.

But with a report like this
http://validator.w3.org/check?uri=ht...so-8859-1.html
you need to "beware bogons".