Creating a Multiple Column Layout

A region is an area on a page that uses a specific template to format HTML content. You use regions to group page controls. To create a multiple column layout, you create two regions that display in adjacent cells of the same table.

You can create a multiple column layout by:

  • Manually creating the two adjacent regions

  • Defining a page template that contains a multiple column table

  • Defining a page template that contains multiple DIV areas

  • Defining a page template multiple with floating DIV based regions. For example, using DIV based region templates, you can control which regions display next to each other and which break to the next line using the region attributes

Topics:

Creating Regions in Multiple Columns

You create regions using the Create Region Wizard. To create a two-column page, you create two regions. Oracle Application Express replaces the #BOX_BODY# substitution string within a two-column table and displays the regions in two separate cells.

To create a two-column page by creating regions:

  1. Navigate to the Page Definition. See "Accessing the Page Definition".

  2. Create the first region:

    1. Under Regions, click Create.

      The Create Region Wizard appears.

    2. Select a region type.

    3. From the Column field, select 1.

    4. Follow the on-screen instructions.

  3. Create the second region:

    1. Under Regions, click Create.

      The Create Region Wizard appears.

    2. Select a region type.

    3. From the Column field, select 2.

    4. Follow the on-screen instructions.

Creating a Multiple Column Page Template

Page templates define the appearance of individual pages, including the placement of page controls and components. Each page template is divided into three sections: Header, Body, and Footer. The most basic template must include the substitution string #BOX_BODY# in the Body attribute. When the page is rendered, the Application Express engine replaces #BOX_BODY# with HTML to display the regions on that page.

You can create a multiple column page by defining a page template that contains a multiple column table. You then explicitly place regions within specific table cells.

The following example demonstrates how to create a two-column page and specify a region position using the #REGION_POSITION_XX# substitution string in each column. You would enter the code in the Body section of the page-level template as shown in the following example.:

<body #ONLOAD#>
  #FORM_OPEN#
  <table style="width:100%">
    <tr>
      <td style="width:50%;padding:5px;">#REGION_POSITION_01#</td>
      <td style="width:50%; border-left:2px #bbbbbb dashed; padding:5px;">#REGION_POSITION_02#</td>
    </tr>
  <br />
  #BOX_BODY#
  #FORM_CLOSE#
</body>

The following is an alternative DIV-based example:

<body #ONLOAD#>
  #FORM_OPEN#
  <div style="width:100%">
    <div style="float:left;width:50%;">#REGION_POSITION_01#</div>
    <div style="float:left;width:50%;">#REGION_POSITION_02#</div>
  </div>
  #BOX_BODY#
  #FORM_CLOSE#
</body>

Once you create this page-level template, the newly defined positions would be available as Display Point options when you run the Create Region Wizard.