473,853 Members | 2,047 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

3 column css without ugly hack?

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
8 3317
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
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
*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.in nerleft
Specifications
Adverts
Newsletter
Advanced search
div.middlepane. innermid
table.comp
div.rightpane.i nnerright
Quick Search
Feedback
div.clear

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

Anyhow, it translates into something like

<table id="layout" class="box"><th ead>
<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>Specif ications</h3></div>
<div><h3>Advert s</h3></div>
<div><h3>Newsle tter</h3></div>
<div><h3>Advanc ed search</h3></div>
</td>
<td class="middlepa ne innermid">
<table class="comp"/>
</td>
</tbody><tbody>
<td class="rightpan e innerright">
<div><h3>Quic k Search</h3></div>
<div><h3>Feedba ck</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
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
*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.a c.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
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.a c.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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
12867
by: Arvid Andersson | last post by:
Good afternoon, I have some data that looks like this: data = , , ] I want to send columns 1 and 2 to a function as two variables, say "plot(col1,col2)". I can get a row by data, but how do I get a column? data would have been my guess,
9
2161
by: flarkblark | last post by:
I recently had the displeasure of looking at the code required to implement the pop-up menus used in a pulldown menu system for a webpage. The sheer amount of Javascript required was amazing and frankly revolting. It is as though the software "engineers" have been thrown out and replaced with "programmers". That is to say, it is a sophomoric hack job, a hideous kludge.
8
3099
by: kaeli | last post by:
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_
34
4586
by: Steven T. Hatton | last post by:
Pete Vilder mentioned this a few days back. This is the "Compiler-Firewall Idiom", or pimple. It's similar to an approach taken in some Java designs. AAMOF, when I saw it in Java, my first reaction was "Oh by Žor! It's freakin' headers all over again!" My greatest misgiving about the approach is that it seems overly complicated. I /feel/ as if there is a better more 'conventional' way of dealing with the separation of interface and...
9
3696
by: DMAC | last post by:
If i want to split a computed column into two or more columns based on the the length (its a varchar) of the computed column, how often will sql server determine what the computed column is? roughly along the lines of select comp_col,'comp_col 2'= case when datalength(comp_col)<=100 then comp_col else left(comp_col,99) + '~' end, datalength(comp_col) from aTable
3
1969
by: cr88192 | last post by:
for various reasons, I added an imo ugly hack to my xml parser. basically, I wanted the ability to have binary payload within the xml parse trees. this was partly because I came up with a binary xml format (mentioned more later), and thought it would be "useful" to be able to store binary data inline with this format, and still wanted to keep things balanced (whatever the binary version can do, the textual version can do as well). the...
10
1738
by: Philipp E. Imhof | last post by:
Hi! I am experiencing a problem with a two-column layout -- apparently I am not the first person, but the solutions I found in GG did not give me what I was looking for. The page should be as follows: ................................ .. +----------+-------+ .
20
4217
by: benhoyt | last post by:
Hi guys, I've been using Python for some time now, and am very impressed with its lack of red tape and its clean syntax -- both probably due to the BDFL's ability to know when to say "no". Most of the things that "got me" initially have been addressed in recent versions of Python, or are being addressed in Python 3000. But it looks like the double underscores are staying as is. This is probably a good thing unless there are better...
3
3786
by: hzgt9b | last post by:
I want a page with a centered div containing two rows. Top row has an image and some text. The bottom row needs to have three columns. I'd love to have the 1st column set to a fixed width then have the 2nd and 3rd columns fill the remaining space but I've given up on that and am willing to settle for the second row to have a fluid 3-column layout (or something else simple). Anyway, I've developed a page where the second row has this 3...
0
9748
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10670
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10735
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10358
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9506
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
7074
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5934
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
4143
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3180
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.