Equally tall CSS 'columns'

[ktinkel]

Does anyone know any useful method for controlling the height of all the columns on a web page?

What if you want to have vertical borders (or a panel of color, occasionally) fill all the columns on a web page to the same depth? The only solutions I can find are kludgey at best.

I have been setting height on the DIV for each column. Since pages vary in depth, this means using either inline or internal CSS for that, and it is inelegant and very likely to produce a minorly embarrassing mess with text overrunning one of the columns.

And I have seen one trick on A List Apart (in “Faux Columns” by Dan Cederholm): Use a background image of defined height. Same problems, by and large — have to set the height on a page-by-page basis. Ick.

Are these the only options we have? Seems to be, but figured one of you here might have another idea.

[annc]

Originally Posted by ktinkel

Does anyone know any useful method for controlling the height of all the columns on a web page?

What if you want to have vertical borders (or a panel of color, occasionally) fill all the columns on a web page to the same depth? The only solutions I can find are kludgey at best.

I have been setting height on the DIV for each column. Since pages vary in depth, this means using either inline or internal CSS for that, and it is inelegant and very likely to produce a minorly embarrassing mess with text overrunning one of the columns.

And I have seen one trick on A List Apart (in “Faux Columns” by Dan Cederholm): Use a background image of defined height. Same problems, by and large — have to set the height on a page-by-page basis. Ick.

Are these the only options we have? Seems to be, but figured one of you here might have another idea.

I tried Dan's solution early last year, and found it difficult to implement. In the end, I just gave up and decided that white backgrounds were good. <g>

[ktinkel]

Originally Posted by annc

I tried Dan's solution early last year, and found it difficult to implement. In the end, I just gave up and decided that white backgrounds were good. <g>

I prefer white backgrounds for text myself, but like having vertical hairline rules (aka 1px borders) to help define some columns.

I last asked about this before we migrated to the new CompuServe, so thought maybe someone had figured out a better way by now. Guess not, huh?

[annc]

Originally Posted by ktinkel

I prefer white backgrounds for text myself, but like having vertical hairline rules (aka 1px borders) to help define some columns.

I last asked about this before we migrated to the new CompuServe, so thought maybe someone had figured out a better way by now. Guess not, huh?

Probably not, I'd say. I'm sure that if someone had come up with a nifty way of doing it, it would be on A List Apart. ;-)

[ktinkel]

Originally Posted by annc

Probably not, I'd say. I'm sure that if someone had come up with a nifty way of doing it, it would be on A List Apart. ;-)

Yep. My thought exactly. Oh, well.

[Ian Petersen]

Originally Posted by ktinkel

Does anyone know any useful method for controlling the height of all the columns on a web page?

Use tables? ;-)

Seriously, it's tricky (to say the least) using only structural html/css. Making sure your floated boxes are always enclosed by their parents helps a lot, but it's not 100 % reliable. This is a nice method (if you can live with the kludges):

http://www.positioniseverything.net/easyclearing.html

Otherwise, wait for CSS 3 ...

[ktinkel]

Originally Posted by Ian Petersen

Use tables? ;-)

Gasp! I cannot believe you said that! <g>

Originally Posted by Ian Petersen

Seriously, it's tricky (to say the least) using only structural html/css. Making sure your floated boxes are always enclosed by their parents helps a lot, but it's not 100 % reliable. …

Otherwise, wait for CSS 3 ...

Oh, well. I don’t like the kludges much. As for CSS 3, do you think it will be out and supported by, oh, let’s say, 2010?

Nice seeing you here!

[Ian Petersen]

Originally Posted by ktinkel

Gasp! I cannot believe you said that! <g>

Well, sometimes life's too short ... After all, if it's really important that the two columns are the same height, is it that much worse to use a simple table with two cells opposed to a forest of extraneous DIVs, SPANs and associated CSS kludges all in the name of semantic purity? I would usually say yes and design around it, but sometimes I could be tempted ... <g>

Originally Posted by ktinkel

Oh, well. I don’t like the kludges much. As for CSS 3, do you think it will be out and supported by, oh, let’s say, 2010?

To be honest, I haven't really been following CSS 3's development. I understand it's been broken into 'modules' from which browser vendors can choose to support one or more, as long as they support a whole module at a time. Or something like that. I've no idea if or when we're going to see any of it though.

Originally Posted by ktinkel

Nice seeing you here!

Well, I do pop in now and again to see if you are all behaving yourselves! I will try to be more active, but I still don't much care for these web forum things. They're getting hard to avoid though, so I may as well get used to it ...

[ktinkel]

Originally Posted by Ian Petersen

Well, sometimes life's too short ... After all, if it's really important that the two columns are the same height, is it that much worse to use a simple table with two cells opposed to a forest of extraneous DIVs, SPANs and associated CSS kludges all in the name of semantic purity? I would usually say yes and design around it, but sometimes I could be tempted ... <g>

See it here, folks! Ian can too compromise. Once in a blue moon. If sufficiently tempted … <ggg>

Originally Posted by Ian Petersen

To be honest, I haven't really been following CSS 3's development. I understand it's been broken into 'modules' from which browser vendors can choose to support one or more, as long as they support a whole module at a time.

Oh, oh! That doesn’t sound good.

Or maybe Firefox and Safari will adopt all the good modules and carry the day! (Whenever, if ever …)

Originally Posted by Ian Petersen

Well, I do pop in now and again to see if you are all behaving yourselves! I will try to be more active, but I still don't much care for these web forum things. They're getting hard to avoid though, so I may as well get used to it ...

Exactly! And with this one, at least, you can visit your old pals!

[Ian Petersen]

Ian can too compromise.

Hey! Compromise is my middle name - especially when muggins here has to do the work!

Oh, oh! That doesn’t sound good.

I think it's quite sensible. A browser can support the 'print' module but not the 'voice' module and still be conformant to the spec. I think the idea is that there is more chance of browsers 'doing it right' (or doing it at all) if they can implement the spec in bite sized chunks rather than the whole thing at once.

Exactly! And with this one, at least, you can visit your old pals!

One thing is visiting, another is actually participating regularly in the threads ... I probably miss 50% of the messages even though I've been here several times today.