17 replies [Last post]
fambi
Offline
Enthusiast
Last seen: 14 years 28 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

I've gone slightly mad.

I'm trying to solve this 3 column problem.

I'm currently using the three column stretch (http://www.positioniseverything.net/thr.col.stretch.html) but if the left column is longer than the middle or right, it writes over the footer.

Now i would like to use the source ordered columns (http://www.positioniseverything.net/ordered-floats.html), but the only problem with that the left-column and right column should be fixed in widht, with the middle shrinking an dexpanding with the screen. If that could have a minimum width, all the better.

Having solved thousands of problems and now coming to this makes me want to just switch off my computer and never switch it on again!!!

Anyone solved this before?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

3 columns

try this ... http://www.pmob.co.uk/temp/3colfixedtest_sourcenone.htm

you can change the div order so the left column comes before the centre column and the page will still function.

fambi
Offline
Enthusiast
Last seen: 14 years 28 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

3 columns

Thanks Chris.

It says

"Only tested on PC (IE5, 5.5 , 6, Mozilla 1.2 , Firebird 0.6.1, Opera7,Netscape 6.2). Opera 6 doesn't like the footer but it's usable.I expect mac and other browsers will not like the footer ."

Can anyone comment?

fambi
Offline
Enthusiast
Last seen: 14 years 28 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

3 columns

Take a look at this:

http://www.tm4b.com/css_demo.php

The problem is solved, but another is created!

Anyway to make the middle and right column increase in height to match the left column?

Helen
Offline
Enthusiast
NYC
Last seen: 17 years 46 weeks ago
NYC
Timezone: GMT-6
Joined: 2005-01-16
Posts: 135
Points: 0

3 columns

Viewing http://www.pmob.co.uk/temp/3colfixedtest_sourcenone.htm on a Mac. Results:

Safari doesn't like it.
screenshot:
http://www.bpdresources.com/3coltestsafari.jpg

Omniweb does the exact thing as Safari (text in leftcol is shunted to the bottom, body space w/background image appears below the footer).

even worse in MacIE5.x:
http://www.bpdresources.com/3coltestmacIE.jpg

Looks perfect in Mac Firefox1.0, Opera 7.5.4, Camino, Netscape 7.2.

fambi
Offline
Enthusiast
Last seen: 14 years 28 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

3 columns

Thanks v.v.v.v.v.v.v.v.v.v.much Helen!

There goes that one!

Any other ideas?

By the way Helen, how were you able to check the way you did?

Helen
Offline
Enthusiast
NYC
Last seen: 17 years 46 weeks ago
NYC
Timezone: GMT-6
Joined: 2005-01-16
Posts: 135
Points: 0

3 columns

How? LOL! I've been on Mac since 1986 and have a bazillion browsers. Unlike WinIE, Mac allows you to run as many as you want at once. I left out the obscure ones like Shiira.

I try not to preach, but I'm one of those Mac users who cannot comprehend sticking with Windows because of all its massive glitches & security issues. Anything I can do to help folks make sites more accessible for Macs just helps everybody, as I see it.

MY big problem is getting folks to preview things for me in Windows browsers. (Don't worry, I'll holler ... Wink )

Re. your layout. Hmm. I didn't look closely at your issues, but do any of these work for your needs? I'm happy to Mac-test anything you come up with.
http://css-discuss.incutio.com/?page=ThreeColumnLayouts

fambi
Offline
Enthusiast
Last seen: 14 years 28 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

3 columns

So i guess my problem's not new!

Nice resource.

I'm checking it out now!

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 16 years 15 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

3 columns

From that link Helen gave you, I can highly recommend the last one, but, as it may take you ages to work down to it:
http://webhost.bridgew.edu/etribou/layouts/skidoo_too/

fambi
Offline
Enthusiast
Last seen: 14 years 28 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

3 columns

Thanks Loraine.

That site looks really great, but the problem is that the centre content has to come first in the code!

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 16 years 15 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

3 columns

Quote:
centre content has to come first in the code

And it does - just scroll down a bit and read the content, then look at the source Wink
The only thing above the content is that silly little horizontal nav bar at the top - but it's not extensive enough to stop a proper search engine index of the content and a place can probably be found for it in the left or right column.

fambi
Offline
Enthusiast
Last seen: 14 years 28 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

3 columns

I think you may be onto something.

HELEN!!! Any comments?

Helen
Offline
Enthusiast
NYC
Last seen: 17 years 46 weeks ago
NYC
Timezone: GMT-6
Joined: 2005-01-16
Posts: 135
Points: 0

3 columns

Skiddo Too is beauteous in Mac browsers. Go for it!

fambi
Offline
Enthusiast
Last seen: 14 years 28 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

3 columns

Thanks! I'm going for it.

Let's see how it goes.

fambi
Offline
Enthusiast
Last seen: 14 years 28 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

3 columns

Ok!

I don't know much about CSS, but how come many elements are repated in the stylesheet such as body?

And also, how can i limit the width to a minimum of 760px?

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 16 years 15 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

3 columns

Quote:
how come many elements are repated in the stylesheet such as body?

That's because the CSS is laid out sections rather than the more commonly seen 'element blocks' i.e. everything to do with body in one block.

The sections are as commented:
Generic selectors
Layout
Vertical navigation
Horizontal navigation
Consistency of font-size across platforms
The 'theme' of the page - colours, font-size, font-face etc.

There could just as easily be six CSS files - one for each section, but that is probably overkill. If you prefer to work with element blocks, there is no reason not to do so. If you think you will be playing around with the layout or theme or fonts then it may be easier to make adjustments in one section and not have to scroll up and down to find them within their single element blocks. Personally, I work in sections until the design is more or less done, then combine the code into element blocks purely for the benefit of people who may want to grab the code.

Quote:
how can i limit the width to a minimum of 760px?

You have to be very careful here because you are taking a perfectly fluid/elastic layout that uses em and %age sizing and trying to turn it into a fixed-width layout.

You could google for min/max CSS techniques.
http://www.google.co.uk/search?hl=en&q=css+minimum+maximum+width+&btnG=Search&meta=
and here's a workaround for IE which doesn't understand max-width:

#mydiv { 
width: expression((document.body.clientWidth>800 ¦¦ window.innerWidth>800?"760px":"100%")); 
}

If the window is wider than 800 pixels #mydiv will default to 760px, otherwise it will be 100% (or whatever) of the window's inner width. Try it on #pageWrapper.

Alternatively for a Javascript solution to IE, try:
http://www.doxdesk.com/software/js/minmax.html

fambi
Offline
Enthusiast
Last seen: 14 years 28 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

3 columns

Cool! I will try it out.

Meanwhile, however,i abandoned the em's for px because i don't understand ems properly.

I'll let you know how things go

fambi
Offline
Enthusiast
Last seen: 14 years 28 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

3 columns

Ok. I tried it out.

It didn't go very well though! Nothing seemed to happen.

Any other ideas?