Creating a VERTICAL line with CSS?

[tedster]

I've been working hard to learn how to avoid using tables for layout, and I'm very happy with results so far. The pages render a lot faster (especially in Netscape, which chokes on table computations anyway).

There's one job I just can't figure out how to do without using tables, and that's creating a vertical line that runs the full length of a section. Layout tables are so accommodating here. Using bgcolor in a table cell I can create a vertical line that stretches or compresses with the layout, no matter whether the viewer overrides my font settings or not.

I can't figure out similarly flexible and accomodating method using only CSS and no layout tables. Right now I just create the layout so it looks good with my font choices, but I know it degrades fast.

The need for a flexible vertical line comes up often enough that I'd like to find a method that avoids tables. Is there one?

[Marcia]

I am totally reliant on tables myself. But I do believe it uses <HR> with a width of 1 pixel and height designation of "whatever". Is that correct?

[Brett_Tabke]

Well, my first thought was to set border right, top, bottom to a width of 0 and then the border-left to the size and color I wanted. Didn't work. Ok, try two: set top, right, bottom border of a box to color of the background. Worked...a little. But as always, netscape has severe problems.

[tedster]

>> width of 1 pixel and height designation of "whatever". Is that correct?

Yes, but it's that "whatever" that confounds me. How do I say "draw it until the div content stops"?

So far, all I can come up with is very convoluted JavaScript (separate code for NN4 and MSIE5 and nothing works so far in NN6) to read the rendered height of the div.

If that's the best answer, I'll stick with tables for this job.

[tedster]

Thanks for the experiment, Brett. I never thought about setting three borders to the background color. It's a good shot.

For now I guess I'll just have my eyes open for live examples. So far, everything I've checked out uses tables.

[knighty]

What about using CSS to have a line running vertically as a background?

[tedster]

Thanks knighty, that has potential. My first shot at it seems to have a few associated Netscape problems, but I'm going to play with this direction some more.

[gmiller]

Quick question about the left border, Brett: what code did you use? NN4 can't handle the border-left, but it can handle border-left-style, etc.

Also be aware that NN4 tends to throw in extra padding just for entertainment value.