tedster
msg:1215419 | 5:40 pm on Aug 2, 2002 (gmt 0) |
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
msg:1215420 | 5:45 pm on Aug 2, 2002 (gmt 0) |
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
msg:1215421 | 5:48 pm on Aug 2, 2002 (gmt 0) |
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
msg:1215422 | 5:51 pm on Aug 2, 2002 (gmt 0) |
Yes, or float the right panel inside tha content div. Neither is particularly nice but, hell, nn4? Sheeesh! Nick
|
Gene
msg:1215423 | 6:12 pm on Aug 2, 2002 (gmt 0) |
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
msg:1215424 | 6:33 pm on Aug 2, 2002 (gmt 0) |
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
msg:1215425 | 1:34 pm on Aug 3, 2002 (gmt 0) |
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
msg:1215426 | 9:48 pm on Aug 3, 2002 (gmt 0) |
Nice work, Rhys. That one goes in the toolkit!
|
Rhys
msg:1215427 | 7:49 am on Aug 5, 2002 (gmt 0) |
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
msg:1215428 | 10:13 am on Aug 5, 2002 (gmt 0) |
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
msg:1215429 | 10:26 am on Aug 5, 2002 (gmt 0) |
This is a great resource: [glish.com...] You can steal anything and he has lots of examples with code.
|
Rhys
msg:1215430 | 11:43 am on Aug 5, 2002 (gmt 0) |
"This is a great resource...."
Agreed, I found that one too, but it won't work in NN4
|
moonbiter
msg:1215431 | 1:42 pm on Aug 5, 2002 (gmt 0) |
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
msg:1215432 | 2:03 pm on Aug 5, 2002 (gmt 0) |
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
msg:1215433 | 9:45 pm on Aug 5, 2002 (gmt 0) |
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
msg:1215434 | 1:17 am on Aug 6, 2002 (gmt 0) |
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
msg:1215435 | 2:03 am on Aug 6, 2002 (gmt 0) |
Pass
|
|
