From Containers to the Layout Hierarchy 
Page elements can either be containers or non-containers. Containers can contain other elements, non-containers not. The layout hierarchy described below basically deals with container elements, that is, with elements that can contain other elements including other containers. This is critical because too much nesting can let a page appear visually overloaded.
Application Containers
At the root of the layout hierarchy there is a "root" container that contains the application. In the Web or portal environment, there are two cases to consider:
The application container is a simple background, such as a frame or window. This is the case for the so-called Web applications, including the portal administration applications
The application container is a tray or tile. The container which may have elements and controls on its own; the application that resides inside this container may use the services of the container. From the application's point of view the container is all it knows about -- at least from a design perspective.
Container Controls Inside Applications
Inside an application, container controls define the layout hierarchy of an application. Such containers are:
Areas (Web applications only)
Tabstrips
Groups
Subgroups (group of simple elements with or without heading - not included in a group control)
A Matter of Interpretation - Linear Sequences vs. Sequences of Containers
From a technical point of view, not all of these containers are "real" containers. Areas are subdivisions of an application. That is, areas form a linear sequence within an application. Subgroups are groups of simple page elements that may be introduced by a heading. Typically, they are separated from the remainder of the page by whitespace or separator lines.
From a layout point of view, however, it is easier to view areas and subgroups as "real" containers - for the layout process this does not make any difference. The advantage of regarding these elements as real containers is that a layout can be expressed in a hierarchical or treelike fashion, which makes it easy to gain an overview of the page or application structure.
Non-Containers
While containers create the "skeleton" of a page, non-containers are the "flesh" of a page. These elements are fields, buttons, selection elements, text units, and tables. As these elements differ in complexity, nesting rules ensure that a page cannot become too complex. For example, table views are similar in complexity to groups and tabstrips. Therefore, they are placed on the same level in the layout hierarchy as these containers. A respective rule that takes this aspect into account would state that table views may not be placed into groups or tabstrips if they are the only control that is inside the container.
Separators
Separators, such as line or whitespace "separate" elements or containers. Therefore, they are difficult to integrate into a hierarchical model of a page layout. They can be viewed as "concluding elements" or "borders" of containers (they are easier to integrate into a "linear" model of the layout).
Note that separators are different. While you would separate containers or elements that are on the same hierarchy level whitespace, you would use lines because that would introduce unnecessary framing.
Creating the Layout Hierarchy
The layout hierarchy is created by placing containers and simple elements on a page. The rules presented below govern how page elements can be combined, either by sequencing them vertically or horizontally, or by nesting.
Containers may contain containers (nodes), simple elements (leaves), or both. In addition, non-containers may reside on the same hierarchy level as containers. But they are "end nodes" and do not continue the layout hierarchy.
Example
A table view may reside on the same level as a group or a tabstrip
The layout rules presented below specify:
Which containers may contain which other container(s) - including itself
The specific conditions for the nesting, for example, alone or together with other elements
How many levels deep the nesting may be
Which simple elements may be placed into which container - and the specific conditions for this
Which containers and which simple elements are on the same hierarchy level