Preventing a DIV from being stretched.

[tim042849]

I have developed a javascript module as an onclick handler in an input element
which fills a div element with a calendar.
Then handler also provides (auto-generates) some simple CSS rules which apply to elements in the
div innerHTML, but not the div tag itself. These rules are also part of the div innerHTML. The css rules follow:

.tjp_nav {background-color:#1505a5;color:#fff;font-weight:bold;}
  A.tjp_navlink:link {color:#00ffff;background-color:transparent;text-decoration:none;}
  A.tjp_navlink:hover {color:#ff0;background-color:transparent;text-decoration:underline;}
  A.tjp_navlink:visited {color:#00ffff;background-color:transparent;text-decoration:none;}
  .tjp_header {background-color:#696969;color:#fff;font-weight:bold;}
  .tjp_date {background-color:#ffffff;color:#696969;font-weight:bold;}
  A.tjp_datelink:link {color:#1505a5;background-color:transparent;text-decoration:none;font-weight:bold;}
  A.tjp_datelink:hover {color:#aa0000;background-color:transparent;text-decoration:underline;}
  A.tjp_datelink:visited {color:inherit;background-color:transparent;text-decoration:none;}

In the example that can be seen at http://www.tj49.com/images/demo/correct_size.png the calendar is being presented as I would want it to. However in another site, the calendar is being 'stretched'. See : http://www.tj49.com/images/demo/wrong_size.png
In that instance, my client has CSS rules which are affecting my calendar. I am not a CSS guru. I would welcome advice on how to remedy that situation. I would suspect that an absolute height and width for the div tag would not be the answer, because that might restrict the element from acommodating all elements within it. URLs to other discussions on similar topics or documentation is welcomed.
Thanks
tim

[mistin.ca]

Find the div that the calendar is "contained" in and set the width for it.

[tim042849]

Find the div that the calendar is "contained" in and set the width for it.

Thanks for the reply mistin.ca. Unfortunately,
setting width="10%" or even width="1%" does not correct the problem.

Please advise further.
regards
tim

[mistin.ca]

Would have to see the code in its entirety

the full calendar and any css related to it

[tim042849]

Would have to see the code in its entirety

the full calendar and any css related to it

I will provide that. First of all, I have noticed that the composition
of the content rendered by the javascript may be incorrect. I am going
to examine that and rewrite if necessary. Time doesn't permit until a
couple of hours have passed.
thanks again
tim

[Major Payne]

Thanks for the reply mistin.ca. Unfortunately,
setting width="10%" or even width="1%" does not correct the problem.

Please advise further.
regards
tim

Since you used percents here, the div will still stretch in relation to the browser's viewport size and its contents. Try setting a fixed width/height and using overflow: auto; to control the scrollbars when content overflows the size of div you set.

[tim042849]

Since you used percents here, the div will still stretch in relation to the browser's viewport size and its contents. Try setting a fixed width/height and using overflow: auto; to control the scrollbars when content overflows the size of div you set.

Looks like you nailed it!
Thank you

[mistin.ca]

Since you used percents here, the div will still stretch in relation to the browser's viewport size and its contents. Try setting a fixed width/height and using overflow: auto; to control the scrollbars when content overflows the size of div you set.

The child div inherits the parent size, so 10% of whatever it's parent is..

10% of 100, 1000, 10000 is still 10%..

That's just dirty fix though it's not like I don't do that more than.. ocasionally

[tim042849]

The child div inherits the parent size, so 10% of whatever it's parent is..

10% of 100, 1000, 10000 is still 10%..

That's just dirty fix though it's not like I don't do that more than.. ocasionally

I use the pixel metric as opposed to the 'percent' metric.

style="width:200px;height:200px;"

Comments?
thanks

[mistin.ca]

I use the pixel metric as opposed to the 'percent' metric.

style="width:200px;height:200px;"

Comments?
thanks

It's fine to do that

Don't mind meee the peanut gallery

[tim042849]

It's fine to do that

Don't mind meee the peanut gallery

Okay - Dokay. Now I can charge the client for any further time on this.
Thanks a bunch every body.
tj