Home/ Questions/Q 323583
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T09:02:40+00:00

What is the best approach for defining page width of a web app? Most

  • 0

What is the best approach for defining page width of a web app? Most of our users have 19″ monitors, but many run the apps from 14″ laptops, and some have 24″ monitors (assume it’s a max resolution). From what I know, the two most common methods are: using fixed width pages or dynamic (max) width (100%).

There are problems with either approach. If a page is fixed width optimized for a 14″ laptop, then there will be a lot of wasted space on larger monitors (e.g. even though over 30% of the screen is blank on the sides, the user will have to scroll down to get the content). I used to be a proponent of dynamic width until I started seeing pages, which looked great on 14″ and 19″ screens displayed, on 24″ monitors (the major issue is with right-aligned items, such as buttons, which become separated from the main content).

Ideally, I would want the page width to be dynamic (100%) until it reaches certain threshold (say, 600px). Is this possible? Is there a better alternative?

UPDATE: Just to clarify: I want the content of the page to be at 100% width, but within certain range, say 400px and 900px (so the user will see a horizontal scroll bar after resizing window to 300px width, and there will be white space on the sides if the window is resized to 1000px width, but between 400px and 900px, the content would auto adjust). Possible?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    One way to set a maximum width for a div or table is to use CSS Expressions

    div#myDiv
{
     max-width: 980px; 
     min-width: 980px; 
     width: 980px; 
     width: expression(Math.max(Math.min((document.documentElement ?   document.documentElement.clientWidth : document.body.clientWidth) - 20, 1000), 980)+'px');
}

    You can replace 980 with 600 in your case. I will often create a container div to hold say the header, and footer such that they will expand the entire width of the screen, while using a child div to contain the content. In this way you can constrain the content (using the above expression), while allowing it to expand / contract based on screen size up to the max-width you specify.

    ******* UPDATE *********
    Based on your clarifications on the comments, this example code should do what you want, if I understand you correctly. Page Header, Footer, Etc are auto sized to fit the screen, while the content is constrained to a max width of 600px wide, scaling smaller as neccesary.

    <html>
<head>
    <style>
    div#contentDiv
    {
        max-width: 600px;
        width:expression(document.body.clientWidth > 600? "600px": "auto" ); 
        border: red 1px solid;
    }
    div#wrapper {width: auto; border: blue 1px solid;}
    </style>
</head>
<body>
<div id="wrapper">
    <div id="contentDiv" style="height:686px; border: solid 1px red;"></div>
</div>
</body>
</html>
    • 0