77 replies to this topic

[Raphael]

A truly cross-browser tableless column solution has yet to be developed. Basically, CSS as it stands today simply *won't* do it. It doesn't have that ability.

The faux columns are a cheat. The DOM-scripting solution requires scripting to be turned on. CSS simply does not have the ability to say "Make this div as high as the one next to it", an ability that is inherently built into a table cell.

I've used both scripted and faux column solutions on sites I've developed in the past. I like the purity of CSS, of separation of content and design.

But until CSS for layout improves, there are still things that tables do that CSS can't.

[chrishirst]

Dang It! I get an error on Chris's link.

OLE DB Provider for ODBC Drivers error '80040e21'
ODBC driver does not support the requested properties.
/include/inc_funcs_sql.asp, line 46

We were in the final throes of moving all the sites and mail to nice new shiny servers in a nice shiny datacentre and had a bit of a gap in getting SQL live.

4 hours sleep in 2 days does that to you

[maleman]

sleep? that's for nerds anyway. how you gonna get anything done if you waste all your time sleeping?

hey Chris, is it cool for me (and other folks) to use your script on our pages?

[Randy]

Basically, CSS as it stands today simply *won't* do it. It doesn't have that ability.

Do I remember from my free time (ha!) reading that tableless, pure CSS, multiple column layouts are supposed to be part of the CSS3 specs Raph? I'm sure I remember reading that somewhere long ago and far away, but wonder if it's still part of the mix in the next css version.

Of course even if it is, we'll still have to wait for browser support of CSS3 and for everybody to upgrade their browsers. So maybe by 2010 if they release CSS3 next week.

[chrishirst]

is it cool for me (and other folks) to use your script on our pages?

Of course.

[foamcow]

How are css based, tableless, multicolumn layouts any more of a cheat than a tabled design?

It's perfectly possible to create multi column layouts with CSS - we do it all the time!

The only *cheat* comes when you want a colour or background behind your columns to extend to the length of the longest column. To do this all you need to do is wrap your columns in another container and apply a background to it - exactly as you would with a table.

Since a background is just that, a background, it has no real place in the markup anyway so it makes more sense to use CSS to specify it (even if you are using a table).

What you should be able to do with CSS3 is specify the content of a block to split into balanced columns automagically. That's kind of a different requirement to what was initially described here and something that can't yet be achieved with any "out of the box" method.

[Raphael]

Do I remember from my free time (ha!) reading that tableless, pure CSS, multiple column layouts are supposed to be part of the CSS3 specs Raph?  I'm sure I remember reading that somewhere long ago and far away, but wonder if it's still part of the mix in the next css version.

Of course even if it is, we'll still have to wait for browser support of CSS3 and for everybody to upgrade their browsers.  So maybe by 2010 if they release CSS3 next week. 

Well, that's the thing, isn't it - Regardless of spec, it's browser support in the end... I mean, at the end of the day, the W3C are nothing more than a powerless body able to only wag their fingers at browser manufacturers who don't hop into line.

[Raphael]

How are css based, tableless, multicolumn layouts any more of a cheat than a tabled design?

Because with the faux-column method, you've cheated to give the *appearance* of a column. There isn't actually a column where there isn't any content - Because the div has only stretched vertically to be as high as it's content - unlike a table where there most definitely *is* a column, because the cell has stretched vertically to be as high as it's neighbors.

That's not a cheat. In a table, there is a physical delineated space on the web page, which can have a border placed around it.

In CSS, to place a border around the "fake" column, you'd have to continue the illusion by using the surrounding cells to place a border. You'd be juggling nested divs all over the place to make it look correct, in all situations, whereas tables just work that way. An example:

CODE

----------------------------
| A   |     B     |   C    |
| 20% |    80%    |  20%   |
|~~~~ |           |        |
|     |           |        |
|     |           |        |
|     |~~~~~~~~~~~|        |
|     |           |~~~~~~~ |
|     |           |        |
|     |           |~~~~~~~ |
|     |           |      D |
|     |           |        |
|     |           |        |
----------------------------

Borders where the | and - symbols are, but not where the ~ are. The ~ symbols mark where the content is. Of course, that could change, and the design would have to be fluid in both the horiztonal and vertical directions, with a minimum height of 100% of the browser window.

It's perfectly possible to create multi column layouts with CSS - we do it all the time!

The only *cheat* comes when you want a colour or background behind your columns to extend to the length of the longest column. To do this all you need to do is wrap your columns in another container and apply a background to it - exactly as you would with a table.

If you're going to start nesting divs in a table-like fashion, where's the advantage in using CSS. You get the same nasty management issues when updating your page, except that instead of asking "is this table cell closed?", you're asking "is this div closed?"

All my multi-column layouts right now are pure CSS, but I know for fact that the basic layout part would have been easier to do in a table.

Since a background is just that, a background, it has no real place in the markup anyway so it makes more sense to use CSS to specify it (even if you are using a table).

I fully agree.

What you should be able to do with CSS3 is specify the content of a block to split into balanced columns automagically. That's kind of a different requirement to what was initially described here and something that can't yet be achieved with any "out of the box" method.

Err, and that's exactly what a table row does, and why a full-screen table makes a 3 column layout easier than CSS.. Which is what I was saying in the first place that CSS doesn't do..

CSS simply does not have the ability to say "Make this div as high as the one next to it", an ability that is inherently built into a table cell.

Don't get me wrong. There's lots of things that CSS will do for layout that tables won't to, or at least, it's prohibitively difficult to do without nasty multiple table nesting, which is why I use CSS. But until all web browsers can render the layout parts of CSS identically, a tabled design is still the only way to guarantee a complex design will look identical in all browsers and on all OS's.

Ideally, a tabled-design with CSS for it's styling, because that is the area where CSS really shines... And ideally, in my perfect world as a developer, the W3C would have left CSS as styling, the way it was originally invented and invented *anther* language, a layout language.

I personally, rather like the idea of having 3 languages that make up a web page - A markup language for marking up the logical sections of a document, a style language for describing the visual appearance of those sections, and a layout language for positioning each section - Rather than trying to make CSS (which in my opinion should be styling only) work double duty on trying to desribe layout position *and* styling at the same time.

But hey, what do I know, I've only been doing this professionally for 14 years.

Edited by Raphael, 02 September 2006 - 08:13 AM.

[Raphael]

Oh yeah, I forgot the other thing that you can't do in CSS..

.. center a single element in the very center of a page, both horizontally (which you can do in CSS easily).... *and* vertically.


... which, again, is trivial using tables.

[chrishirst]

Oh yeah, I forgot the other thing that you can't do in CSS..

.. center a single element in the very center of a page, both horizontally (which you can do in CSS easily).... *and* vertically.
... which, again, is trivial using tables.

You
can do a reasonable impersonation of it though

http://www.candsdesi...ntre/layout.asp

[foamcow]

But hey, what do I know, I've only been doing this professionally for 14 years.

;-)
Oh please!
That's no real argument. I'm hardly inexperienced myself but I don't equate years on the job with relative understanding of a subject. You obviously know your stuff but the number of years you've been doing something doesn't really mean anything.

There are tons of professional footballers that have been playing professionally for longer than Wayne Rooney but it's certain that he's alot better at it than most of them.

For the record, I wrote a long reply to your post Rapheal. You make some good points and I don't entirely disagree with you, but you really shot yourslef in the foot with the last bit. The words "old dog new tricks" would be too easy to infer.

[maleman]

foamcow, when Raphael speaks, we must listen.

I've shot myself in the foot so many times, it looks like swiss cheese.

If you're using borders on divs, the background trick is moot.

The only way I've found to get two floated divs with unequal content to be the same height is to set both heights to an equal value. Or adjust the short one to match the long by setting it's height.

Now, can one of you guys tell me how to fix this:

When you try to highlight a bit of text in an absolute-positioned div in IE, a whole block of text or even text on another part of the page will highlight.

Anybody?

Edited by maleman, 02 September 2006 - 04:58 PM.

[Raphael]

You
can do a reasonable impersonation of it though 

http://www.candsdesi...ntre/layout.asp

That doesn't center vertically

[Raphael]

  ;-)
Oh please!
That's no real argument. I'm hardly inexperienced myself but I don't equate years on the job with relative understanding of a subject. You obviously know your stuff but the number of years you've been doing something doesn't really mean anything.

There are tons of professional footballers that have been playing professionally for longer than Wayne Rooney but it's certain that he's alot better at it than most of them.

For the record, I wrote a long reply to your post Rapheal. You make some good points and I don't entirely disagree with you, but you really shot yourslef in the foot with the last bit. The words "old dog new tricks" would be too easy to infer.

Err, I was actually referring to my ideas for developing the next level of web description languages. It was more "I've only been doing this for longer than a large number of the W3C people but why should they listen to me, I'm just a gimpy no-name developer?"

That's why I put it after I talked about that part in my post. If I meant "I'm right and you're wrong because I've been doing this for longer than you" I would have put it up at the top where I was arguing with you

Besides, haven't you seen Cars? Ancient has-beens can still teach newbies a trick or two.

However, I'll admit that 'old dogs, new tricks' syndrome is one of the things I suffer from.. (Although that's not what reared it's ugly head this time)

But to be honest, I think I've earned that right.

[Raphael]

foamcow, when Raphael speaks, we must listen.

I've shot myself in the foot so many times, it looks like swiss cheese.

Bah. You're the reason I don't comment on very many CSS threads anymore, maleman. You get there before me, and you're usually right. I got tired of posting "yeah, what he said"

If you're using borders on divs, the background trick is moot.

The only way I've found to get two floated divs with unequal content to be the same height is to set both heights to an equal value. Or adjust the short one to match the long by setting it's height.

Now, can one of you guys tell me how to fix this:

When you try to highlight a bit of text in an absolute-positioned div in IE, a whole block of text or even text on another part of the page will highlight.

Anybody?

Err, dunno?