dynamic div-resizing

[Bartjuh88]

Does anyone know if it is possible to let a javascript dynamically change the size of a <div>-tag?

example: I have a size that is designed for 1024*768... if the explorer window is in full size, the layout is good. When I change the size of the window or view the site at 800*600, a part of the site becomes invisible... is it possible to let Javascript calculate the new values for the position and size? if this is possible: is it also possible for <img> tags?

bye,

Bart

[jscheuer1]

Yes but, not a good idea.

a part of the site becomes invisible...

Don't you mean out of the view area but still visible using the scrollbar? Anyways (where's Mike when you need him?), using JavaScript for something like this will work except if the user has it turned off or unavailable. Even so, the complexity of the code required to cover all possible circumstance is very daunting, and if the user resizes the window or changes resolution after loading the page, more layers of code are required. It is far better to layout the page in a manner that looks OK in all resolutions and window sizes likely to be applied to it. Let text and other content wrap. Don't use HUGE images or divisions. Float content where appropriate. Use relative font sizes. Mike, are you listening?

Note: References to Mike will be understood by anyone who frequents these forums. Understanding this message does not depend upon them.

[mwinter]

Mike, are you listening?

Yes. There isn't really much to add.

HTML is inherently fluid; capable of adapting to viewport size automatically. If it doesn't, you've done something to stop it, such as using absolute widths in too many places. Clearly, there are places where specific widths are necessary, such as when working in concert with images, and navigation sidebars. However, the majority of your document should be capable of reflowing if necessary.

Although fluidity would mean your page could spread across the entire viewport, you can prevent this happening using the max-width CSS property.

body {
  max-width: 40em;
}

Unfortunately, IE doesn't support this property, however you should be able to emulate it (but only in pixels):

body {
  /* Explicitly specify the margin so we know
   * what to subtract in the expression.
   */
  margin: 10px;
  padding: 0;
  max-width: 40em;
}
* html body {
  width: expression(Math.min(document.documentElement.clientWidth - 20, 600));
}

This will only work if the document is rendered in "Standards Mode". That is, you have a complete DOCTYPE specified for the document.

Mike