Welcome to WebmasterWorld Guest from 54.159.12.17

Forum Moderators: not2easy

Message Too Old, No Replies

3 column layouts

Novice CSS question...

     

Gene

5:20 pm on Aug 2, 2002 (gmt 0)

10+ Year Member



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

5:40 pm on Aug 2, 2002 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

5:45 pm on Aug 2, 2002 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

5:48 pm on Aug 2, 2002 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

5:51 pm on Aug 2, 2002 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

Nick

Gene

6:12 pm on Aug 2, 2002 (gmt 0)

10+ Year Member



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

6:33 pm on Aug 2, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

1:34 pm on Aug 3, 2002 (gmt 0)

10+ Year Member



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

9:48 pm on Aug 3, 2002 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

Rhys

7:49 am on Aug 5, 2002 (gmt 0)

10+ Year Member



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

10:13 am on Aug 5, 2002 (gmt 0)

10+ Year Member



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

10:26 am on Aug 5, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

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

Rhys

11:43 am on Aug 5, 2002 (gmt 0)

10+ Year Member



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

moonbiter

1:42 pm on Aug 5, 2002 (gmt 0)

10+ Year Member



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

2:03 pm on Aug 5, 2002 (gmt 0)

10+ Year Member



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

9:45 pm on Aug 5, 2002 (gmt 0)

10+ Year Member



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

1:17 am on Aug 6, 2002 (gmt 0)

10+ Year Member



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

2:03 am on Aug 6, 2002 (gmt 0)

10+ Year Member



Pass
 

Featured Threads

Hot Threads This Week

Hot Threads This Month