Single line is split into two. Why?

Hello,

I’m stuggling with the following css layout : http://jsbin.com/goyeqicele/2/edit

Basically I’m trying to understand why the first line of the table (with an excessively long width on the label) is split into two lines and to fix this. I have overflowed the container (with the red border) but to no avail…

Any help would be most welcome.

Cheers,

WS

OK I think I have it figured out. I added white-space: nowrap; overflow: hidden to the line <div> (the one under the <td>) and that seems to have fixed it (even under IE6 to my surprise!).

If anyone can think of any problems this may cause unbeknownst to me please let me know (yes I’m aware this only works on block elements) but for now this’ll do…

WS

Why didn’t you just reduce the width of the label so that it all fits? The label is 310px width so there’s not room on the same line for the text as well as the container is only 400px wide.

Setting the label to 180px width would allow them all to live on the same line.

You should avoid putting a scroll on elements wherever possible.

Because the width comes from the host j2ee application so while it’s normally sensible I need to handle user mess-ups. Don’t ask. It’s a legacy system that needs tweeking. Personally I’d burn it to the ground and start afresh but I don’t have that option!

You can still handle it with CSS (assuming you have control over the css).

e.g.
.wfVarLabel{width:180px!important}

I realise that there may be more going on than this.

:smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.