Keeping a table cell from changing width

Once again this is a question re: my discography site, which is
perpetually in progress. It pertains to both HTML and CSS, and
possibly JavaScript, so this seems like the right group.

Front page: http://idrastall.home.comcast.net/
CSS: http://idrastall.home.comcast.net/gong.css

I've got a one-row table holding 99% of my content, with album names
along the left side. The right side is initially blank, but as soon as
a link is clicked on, it fills up, causing the dividing border to
shift. (At the moment it doesn't ... see below ...) As re: the width
of both <td>s, I have a few choices:

1. Do nothing ... This causes the left <td> to initially be as wide as
the widest line of text, but as soon as the right side fills up,
everything on the left side gets squished like a 90 lb. kid at the
front row of a heavy metal concert.

2. Use <colgroup> ... This causes the left <td> to initally be as wide
as the widest line of text, but after the right side fills up, resets
according to the widths set in <colgroup>. The dividing border will
move, though not as much ... unless it's set to the exact width of the
longest line of text, which will change as certain variables, like
screen resolution, change. I can set it to look right on my own
screen, but that's about it.

3. Set width: xx% on the left <td> ... This has the same effect as
using <colgroup>, from what I can fathom.

4. Set white-space: nowrap on the left <td> ... This is what I've
done. The left side is initally the width of the longest line of text,
but once the right side fills up, it tries to squish over, finds it
can't, and retains the same width.

So that's the answer ... except it breaks if you increase the font
size. What happens is the left side gets wider and wider, squishing
the right side more and more. I assume it also does this on smaller
resolutions and smaller viewports. Clearly the left side should wrap
/when pushed/, but there's no way to specify that, AFAIK. There might
be a way to do that with JavaScript. Perhaps determining the width of
the left <td>, and if it's too large, removing white-space: nowrap.
Unfortunately, this would simply cause the behavior of the first
choice listed above ... aside from the fact that the JS script in
question might not even be feasible.

It's possible that I will have to go with <colgroups> and just accept
that the right border of the left <td> (or, I suppose, the left border
of the right <td>) will move a bit. This blow can be softened by
making the top nav text left-aligned instead of centered, so that it
also doesn't move. Barring that, does anyone see a possible other
solution? To my mind, if a user sees that border moving, the site will
seem to be slightly broken ... not terribly broken, but a bit of an
aesthetic frustration that makes the whole site look bad.

Possibly switching from a table to <div>s for layout? I've never had
luck doing that before, and a coder I respect once told me he'd start
using <div>s for layout when they work as well as tables. So far I've
not seen them doing so.

Ian
--
"Is that camp or kitsch, Harry?"

Ian Rastall wrote:

Once again this is a question re: my discography site, which is
perpetually in progress. It pertains to both HTML and CSS, and
possibly JavaScript, so this seems like the right group.

Front page: http://idrastall.home.comcast.net/
CSS: http://idrastall.home.comcast.net/gong.css
[...]
4. Set white-space: nowrap on the left <td> ... This is what I've
done. The left side is initally the width of the longest line of text,
but once the right side fills up, it tries to squish over, finds it
can't, and retains the same width.

So that's the answer ... except it breaks if you increase the font
size. What happens is the left side gets wider and wider, squishing
the right side more and more. [...]

An easy solution is to add display:block and overflow:hidden to the

td#left style. Alas, IE completely ignores it. So a different approach is
needed.
Change your CSS to this:
table#layout td#left {
background-color: #228B22;
margin: 0em;
border-right: thin solid #8fbc8f;
}
table#layout td#left p {
overflow: hidden;
width: 15em;
margin: 0;
padding: 0;
white-space: nowrap;
}

Place each album name in a <p> element. E.g.:
<p><a href="javascript:show('magick-brother');"
onclick="show('magick-brother');">Magick Brother (1970)</a></p>

"javascript:" is a non-standard protocol although most browsers accept
it. A standard method is this:
<p><a href="#no-workee-without-javascript.html"
onclick="show('magick-brother'); return false;">Magick Brother (1970)</a></p>
The "return false" prevents the browser from loading the link when
javascript is enabled.
Although this can be done with CSS...

Possibly switching from a table to <div>s for layout? I've never had
luck doing that before, and a coder I respect once told me he'd start
using <div>s for layout when they work as well as tables. So far I've
not seen them doing so.

That's like saying I'll eat apples when they taste like pomegranates.

Your coder friend has not adapted very well to the WWW medium.
Your page could be very easily converted to use HTML and CSS to achieve
the same layout.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

On Sun, 04 Dec 2005 12:22:32 -0700, Jim Moe
<jmm-list.AXSPAMGN (AT) sohnen-moe (DOT) com> wrote:

Hi Jim. I'll work up a test page and come back with the results.

That's like saying I'll eat apples when they taste like pomegranates.
Your coder friend has not adapted very well to the WWW medium.

Admittedly, that was a few years ago that he said that, and browsers
have somewhat caught up.

Your page could be very easily converted to use HTML and CSS to achieve
the same layout.

I think it would be a good idea, though even a two column layout is
tricky. My "solution" is to apply float: left to both <div>s, and
after that breaks, I give up ... a bit too easily ... so I'll do some
work on that as well.

Ian
--
"Is that camp or kitsch, Harry?"