SAP Web Applications: Column Layout Usage

These are general column layout guidelines for trays. The column concepts can also be applied to tabs, although the horizontal rules would be replaced by tab bevels.

1. Nomenclature

a) Contained items. These are elements with full borders on all sides. Examples are groupboxes, tables, and bordered text displays.

b) Uncontained items: These are elements which do not have defined borders. Examples are text, series of radio buttons or checkboxs, and fields. Uncontained items use horizontal and vertical rulers to separate the item from neigboring elements.

 

2. Column Options

a) 100%
alignment
Vertically aligned to the top and to the left.10 pixel buffers around borders.

proper usage
tables and groupboxes;

improper usage
uncontained items, text displays

 b) 50%
alignment
Vertically aligned to the top and to the left. 10 pixel buffers around contained and uncontained items. 10 pixel margins around rulers and between groupbox borders and inner content.

proper usage
tables and groupboxes; uncontained items, including text in list format (with horizontal or vertical rulers to divide uncontained items); text displays;

improper usage

 
c) 66%/33&
OR 33%/66%
alignment
Vertically aligned to the top and to the left. 10 pixel margins and buffers.

proper usage (66% width):
Can be divided into one or two sub-columns.
Can display one large text display if content spans full column width OR the 66% wide column can display 2 small text displays if the 66% column is divided into 2 subcolumns.

proper usage (33% width):
Can display text displays as well as uncontained items, including text in list format.

improper usage (33% width):

Source:  SAP Business HTML Cookbook