3 column layouts

Novice CSS question...

[Gene]

Just a quick little question...

I haven't taken the CSS plunge yet--I am planning to!

I've heard people in the forums "throw" around the phrase 3 column layouts when discussing CSS.

It's got my curiosity stirred up! What are you folks talking about?

--Gene

P.S. I assume you understand that I know generically what a 3 column layout is. I'd just like to know how it relates to CSS design. Keep in mind, I have only a cursory understanding of CSS.

[tedster]

Lots of discussion here. For example; [webmasterworld.com...]

The idea is to generate a totally fluid 3-column layout, one that resizes to different window sizes, using only CSS and no "layout tables".

[Nick_W]

Basically, the general aproach is 3 divs, with fixed width - absolutely positioned. One to the left, and one to the right, and one given a padding that keeps it clear of those divs.

like this

div#left {
postion: absolute;
top: 0px;
left: 0px;
width: 200px;
}

div#right {
position: absolute;
top: 0px;
right: 0px;
width: 200px;
}

div#content {
padding-left: 220px;
padding-right: 220px;
}

Try a site search for 3 column layout, there are some great examples here...

Nick

[tedster]

As far as I know, NN4 support is the bear to watch out for. That browser doesn't support right: positioning, which every 3-column layout I've seen depends on. So the @import hack or something similar (I use js browser sniffing to serve NN4 it's own stylesheet) is a requirement until that old geezer finally vanishes.

[Nick_W]

Yes, or float the right panel inside tha content div. Neither is particularly nice but, hell, nn4? Sheeesh!

Nick

[Gene]

OH BOY!

I might be getting excited about CSS because my site's homepage is built on a 3 column layout! The left and right columns are fixed, and the middle is liquid. Most of the sub pages are 2 column layouts (left menu fixed, right body liquid).

Am I to understand that the 3 column layout is among the most "user friendly" ways to go for someone who is starting out in CSS design?

--Gene

P.S. If you have a minute, take a look at my Table liquid 3 column homepage... home made the "old fashioned" way!

P.P.S. Keyplyr has a beautiful liquid designed home page! My hats off to him!

<added>...

P.P.P.S. Sorry, I just now read the forum link that Tedster provided. Do I have it all wrong??? Is it ACTUALLY DIFFICULT to do a liquid middle column with fixed left and right columns using CSS?
</added>

[papabaer]

The only difficulty is NN4, the layouts themselves are actually quite simple. Experiment freely: it's a learning process that will teach valuable lessons in the "art" of seperation of style and content! ;)

[Rhys]

I think I've killed the bear.... :)
This CSS code gives a 3 column liquid layout in both NN4 and IE5

.left {
position: absolute;
left: 2%;
width: 20%;
}
.content {
position: relative;
left: 22%;
width: 50%
}
.right {
position: absolute;
left: 76%;
top: 10px;
width: auto;
}

It is very touchy, for instance, it needs the RELATIVE positioning for the center content DIV, or NN screws up the width% allocation, but it works and will render 3 self adjusting columns. It works in NN4 because there is no RIGHT or FLOAT positioning.
I am passionate about making my sites work cross-browser if possible, and this one looked like a real challenge.

[tedster]

Nice work, Rhys. That one goes in the toolkit!

[Rhys]

P.S.
If anyone needs a sample 3 col liquid page with some simple instructions, it can be found here
/downloads/page2.htm on my home page

[idiotgirl]

Rhys- You make it look too easy. (Just whe I was banging my head on the wall and pulling out the calculator.) Thanks for sharing.

[edit_g]

This is a great resource: [glish.com...]

You can steal anything and he has lots of examples with code.

[Rhys]

"This is a great resource...."
Agreed, I found that one too, but it won't work in NN4

[moonbiter]

Well, if you can read the page ...

Still, you're right about visual layouts using CSS not working in NS 4. But then, almost nothing advanced, modern, or cool works in NS 4.

[starway]

Very good example Rhys.
However, it is designed for 3 floating colomns which is not always useful.
Did you try to make this layout: ¦ left-fixed ¦ center-float ¦ right-fixed ¦ with your example?

This case is spread around the web more than the others and is more useful in real projects.

[Rhys]

No I didn't.
The whole point of this page layout is to make a liquid 3 column page that uses only CSS and retains its proportions whatever the screen res or width.
My initial interest in this was providing functional cross browser 'newspaper' columns in CSS, and I believe this is what this layout achieves. If you 'tutu' with the % ratios you can have whatever proportion widths you want, using only 'position left', which seems to be a safe and well supported declaration.

[rjohara]

Great job, Rhys. Often when you hunt really hard you can find combinations of rules that do work under NS4, although they aren't always the obvious ones.

In your work of this kind have you come across any similar way of getting "list-style-type: none" to work with NS4? Anyone who has tried it knows it puts an ugly question mark where the blank marker is supposed to be. There are lots of places I'd like to use "list-style-type: none" but can't because of NS4.

[Rhys]

Pass