Example: Set Application Page Width

You can control the width of a page and its horizontal-alignment within the browser.

Step 1:  Locate the outer HTML table in your page’s master page template, e.g., HorizontalMenu.master, VerticalMenu.master, etc.

<table border="0" cellpadding="0" cellspacing="0">

     <tr>

          <td class="pcT" colspan="2">

          ....

          </td>

     </tr>

</table>

Step 2:  Add a bounding HTML table with class “pbTable” around that outer table:

<table cellspacing="0" cellpadding="0" border="0" class="pbTable">

     <tr>

          <td>

              <!-- original outer table -->

              <table border="0" cellpadding="0" cellspacing="0">

                   <tr>

                        <td class="pcT" colspan="2">

                        ....

                        </td>

                   </tr>

              </table>

              <!-- end original outer table -->

          </td>

     </tr>

</table>

Step 3:  Add a “width” attribute to the pbTable class.  By default, the pbTable class does not contain a width attribute, so it defaults to 100% of the width of the browser.  You can add a width attribute to set the page width.

.borderTable, .pbTable  {  /* page content container */

     width: 600px;

     }

Note that width specifications are only taken as “suggestions” by the browser, and the page width will actually depend upon the content within the table grid.

Similarly you can center the page within the browser using margin-left and margin-right properties.

.borderTable, .pbTable { /* page content container */

     margin-left: auto;

     margin-right: auto;

     }

Step 4:  Rebuild and run your application.

See Also

Customizing Style Sheets and Page Styles

Creating Your Own Page Style

Compendium of CSS Classes Used in Generated Applications