By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,648 Members | 1,199 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,648 IT Pros & Developers. It's quick & easy.

3 column css without ugly hack?

P: n/a
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/
================================================== ======================
Jul 20 '05 #1
Share this Question
Share on Google+
8 Replies


P: n/a
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
Jul 20 '05 #2

P: n/a
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

Jul 20 '05 #3

P: n/a
*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<sup>2</sup>" 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.
Jul 20 '05 #4

P: n/a
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<sup>2</sup>" 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/
================================================== ======================
Jul 20 '05 #5

P: n/a
*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<sup>2</sup>"
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
Jul 20 '05 #6

P: n/a
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<sup>2</sup>"


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/
================================================== ======================
Jul 20 '05 #7

P: n/a
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/
================================================== ======================
Jul 20 '05 #8

P: n/a
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".

Jul 20 '05 #9

This discussion thread is closed

Replies have been disabled for this discussion.