Home/ Questions/Q 38455
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-10T14:42:39+00:00

How to implement a web page that scales when the browser window is resized?

  • 0

How to implement a web page that scales when the browser window is resized?

I can lay out the elements of the page using either a table or CSS float sections, but i want the display to rescale when the browser window is resized

i have a working solution using AJAX PRO and DIVs with overflow:auto and an onwindowresize hook, but it is cumbersome. Is there a better way?

  • thanks everyone for the answers so far, i intend to try them all (or at least most of them) and then choose the best solution as the answer to this thread

  • using CSS and percentages seems to work best, which is what I did in the original solution; using a visibility:hidden div set to 100% by 100% gives a way to measure the client area of the window [difficult in IE otherwise], and an onwindowresize javascript function lets the AJAXPRO methods kick in when the window is resized to redraw the layout-cell contents at the new resolution

EDIT: my apologies for not being completely clear; i needed a ‘liquid layout’ where the major elements (‘panes’) would scale as the browser window was resized. I found that i had to use an AJAX call to re-display the ‘pane’ contents after resizing, and keep overflow:auto turned on to avoid scrolling

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. instead of using in css say ‘width: 200px’, use stuff like ‘width: 50%’

    This makes it use 50% of whatever it’s in, so in the case of:

    <body>  <div style='width:50%'>   <!--some stuff-->  </div> </body>

    The div will now always take up half the window horizontaly.

    • 0