The Holy Grail? New 3-Column CSS Design

[ucahg]

Hiya!

Today I completely restarted my website design from scratch, in order to explore an idea I had for implementing 3 columns. Before I continue, I apoligize if someone else has already created this method, but if they have I was unaware, and I came up with this on my own today.

The method I stumbled upon has the following features:

• fluid header
• fluid footer
• fixed columns in em's (could used percents probably, haven't tried)
• fluid content pane between columns
• NN4 support (as good as it gets)
• source ordering goes left-center-right
• uses hacks only for NN4 support (and one for IE that shouldn't need to be there)
• columns expand down to the footer (their bgcolor)
• any column can be the longest

I'm attaching a zip file with the full source code (I don't have a permanant host at the time) and I'll also add a bunch of links to my home server, but I can't guarantee this will be up and running 24-7.

Example site:

• XHTML Template Page
• NN4 and Crossbrowser Styles
• Non-NN4 Layout Styles
• Importer (imports non-NN4 styles)

Please let me know if this is useful, if it works in your browsers, if it's original (that is, if something like this method already exists, let me know), and so on and so forth.

Edit:

The files are attached in ZIP format and will need to be approved before added to this message, so be patient.

Edit:

Posted too soon! Well it appears that in Mozilla Firebird and Netscape 4, the middle column does have to be the longest. In Opera either column can be but it adds a small white space under the header. I'll have to look a little more thoroughly into this and tinker with it some more.

[ucahg]

It appears I have to do some more testing and tinkering. It doesn't work in IE5, but a box model hack may fix that. As also mentioned, the middle column has to be the longest in Firebird and NN4, but not IE6, Opera6, or Opera 7. We'll see if I can't get this working a little better Otherwise it's back to the drawing board (or in this case, reverting to the design I've already made using a different method)

[Ryan8720]

It been around for a long time.

http://www.glish.com/css

[ucahg]

You'll notice my method is significantly different from those presented at glish (I just used that name in my title, probably adds more confusion though.. oh well).

This one offers colored columns extending the full width of the page, NN4 compatability, everything fluid, etc.

Now if only I could get it to work

[mrvnsk9]

You could also check out the W3C's layout. It uses a floating three column layout with a header and footer.
http://www.w3c.org

--Mrvnsk9

[mr_invisibile]

http://www.glish.com/css/

excellent resource... been around a while, props to the man...

[ucahg]

Yep I remember seeing that one.

What I was more attempting was more along these lines, except where any column could be the longest.

When I found the layout I just mentioned though, I ended up using that, modifying the source order a bit as well as some other things. And then I'll use javascript to determine the middle column is indeed the largest.

[mr_invisibile]

Don't you also reckon that when you concentrate on the CSS definition you lose out on the aesthetic design lots?

I mean it always looks really angular... right angled.

[ucahg]

Well in my case at the moment, that's the look I'm heading towards. But if you want to do curved borders or image navigation, then you still can with CSS. It does become a little more tricky, and more than likely you'll have to bend the standards a bit (or use code in a way it wasn't originally intended to be used), but it is possible. Chances are you'll have extra markup in the page that isn't truly relevant to the content, but that all depends.

If you code for more standards compliant browsers you can do wonderful things with CSS that are anything but boxy. Using borders to make a star shape, for example, or creating rounded borders with :before and :after, etc.

[mr_invisibile]

If you code for more standards compliant browsers you can do wonderful things with CSS that are anything but boxy. Using borders to make a star shape, for example, or creating rounded borders with :before and :after, etc.

Hey

Do you have any examples of non-boxy CSS styled pages?

[ucahg]

• CSS/Edge
  Check out the curvalicious and slantastic demos.
• http://css-discuss.incutio.com/?page=RoundedCorners A bunch of examples
• http://www.livejournal.com/users/blufive/
  Only works in Mozilla But it's going to be in CSS3.
• http://www.gavncal.demon.co.uk/blufive/
  Same as above.
• http://www.alistapart.com/d/slidingdoors2/v1/ex8a.html
  Some good solid rounded tabs.

These are mostly elements of pages, but if you combine them, you can get a nice rounded page.

However, browser support is sketchy at the time, but it's a glimpse of what the future has to bring.

[mr_invisibile]

wow - its quite cool that!!

I'll definitely have a look into it a lot more now :S

[yngwin]

http://www.livejournal.com/users/blufive/
Only works in Mozilla But it's going to be in CSS3.

Which means the poor people that are using IE (the greater majority still...) won't see any of this for the next three years.

[Hartmann]

ucahg,

I can't get to the site you are trying to display...