Adjusting Div's Width

[vunet.us]

Hello,
I use a floating div with overflow:auto properties for specific reason
(to avoid the bug of overlapping elements). Anyway, the problem is
that this div has 2 tables inside. In some rare cases, tables may have
larger width than my floating div, which is the container for these
tables, and therefore, scrollbars appear.
I need to remove scrollbars, so I created function to get each tables
cllientWidth values and if any table is larger than its container,
apply the same width to the container too or floating div as I called
it.
The problem begins with browser's incompatibility. Sometimes, it still
does not work right. So I figured this is not the best solution.
Could you please recommend a better solution if it occurs to you? I'd
really appreciate your suggestions.
Thanks.

 

[vunet.us]

What bug of overlapping elements? overflow:auto will add scrollbars if the
element overflows.


What would the clientWidth property of the tables have to do with this? It
is the container that scrolls, not the tables. I think you meant to get
their offsetWidths.


That won't always work, even using the offsetWidth property (eg container
has borders.)


You figured right.


Lose the overflow:auto. Then post again and include the source of your page
(or a link to it) and explain this "bug of overlapping elements." You
should try a CSS group as you likely don't need scripting to solve your
problem.

I believe I may need scripting assistance.
This bug https://bugzilla.mozilla.org/show_bug.cgi?id=167801 with
workaround https://bugzilla.mozilla.org/attachment.cgi?id=125003 just
cannot be removed as you suggest because I highly depend on
overflow:auto or overflow:scroll.

What I ask for is how to adjust the width to avoid scrollbars to
appear. And that is pure JavaScript and CSS solution.

Thanks

 

[vunet.us]

[snip]

I believe I may need scripting assistance.
This bughttps://bugzilla.mozilla.org/show_bug.cgi?id=167801with
workaroundhttps://bugzilla.mozilla.org/attachment.cgi?id=125003just
cannot be removed as you suggest because I highly depend on
overflow:auto or overflow:scroll.

That first link leads to a long list of complaints. The second shows an
overlapping DIV and input element. Neither helps me see what your
particular problem is. Can you post your tags and code (or a link to a test
page.)

What I ask for is how to adjust the width to avoid scrollbars to
appear. And that is pure JavaScript and CSS solution.

Did you try using offsetWidth to measure the tables (instead of
clientWidth?) I mentioned borders on the container as an issue, but
actually it is padding that will cause problems when trying to set the
container's width to match.

offsetWidth may be working better but it still is not a solution. The
result is the same. I thought of applying width:auto to expand width
automatically and then measure that new width and make it fixed. But
then the width could have become terribly wide.

 

[David Mark]

(e-mail address removed) wrote:
[snip]

offsetWidth may be working better but it still is not a solution. The
result is the same. I thought of applying width:auto to expand width
automatically and then measure that new width and make it fixed. But
then the width could have become terribly wide.

Why don't you post your code? width:auto is clearly not the answer in
a scrolling container (not to mention IE doesn't like it.) Post your
tags and code and perhaps somebody can help you. Everything is a shot
in the dark at this point and I suspect you are trying to solve the
wrong problem anyway.