How to position elements

To position elements in relation to each other in a template, you can wrap those elements in a Table or Box (see Table and Boxes), and/or use the Spacing property of the elements. The Spacing property can also be used to indent elements or create a hanging paragraph or image; see Spacing.

Aligning objects with an absolute position is easy with the Alignment buttons. Guides help to align elements as well; see Aligning objects.

The top, right, bottom, and left properties specify offsets from the edges of the element's containing block.

Where to use Tables and Boxes

In the Print context, Tables can be used to position elements, as well as Positioned Boxes and Inline Boxes; see Table and Boxes.

Spacing

Boxes, tables, paragraphs and many other elements have a margin and padding.
The margin is the white space around an element, outside the border. It is used to position an element in relation to the other elements, by putting more space between the element and its surrounding elements.
The padding is the space between an element's content and its border. It is used to position the content of the element inside the border.

To learn how to set an element's spacing properties, see Spacing.

Tip: Use a negative left margin to create a hanging paragraph or image.

Aligning objects

In Print sections, objects with an 'absolute position', such as a Positioned Box, have a fixed position in relation to the page (see also: Using the CSS position property).
Objects with an absolute position can be aligned easily:

  1. Press the Ctrl key and hold it down while clicking on the objects that you want to align. The last selected object is the reference object; this object will not be moved.

  2. On the menu, select Format > Align Objects, or use the respective Toolbar buttons to align the objects.

Align a box to the bottom of the last page

An Inline Box can be aligned to the bottom of the last page by setting its position to absolute and bottom to 0 (zero). Here's how to do that.

  1. Insert an Inline Box using the icon on the toolbar.

  2. Select the box, using the breadcrumbs for example. (See Selecting an element.)

  3. Select Format > Box... from the menu to open the Box Formatting dialog.

  4. On the Box tab, under Positioning,

    1. set Position to Absolute

    2. set Bottom to 0 (zero).

Note that the same can be achieved with a style sheet. Give the box an ID, for example: bottom-box, and then add the following style rules to your style sheet.

Copy 
#bottom-box {
    position: absolute;
    bottom: 0;
}

(See: Styling templates with CSS files).

Guides

Guides are horizontal and vertical lines used to help in designing templates, for example when positioning absolute positions boxes over a PDF background. They can only be used in Print sections.

  • Select View > Guides > Show guides to show or hide the guides and margins.

To add a guide, press the Insert Horizontal Guide or Insert Vertical Guide buttons on the Toolbar.

To move a guide, click and drag it to a new location.
Click the Shift key while dragging to make the guide snap to the closest ruler tick.

Double-clicking a guide brings up its Edit dialog where its exact position can be adjusted.

  • Select View > Guides > Lock guides to lock the guides in their current position.

  • Select View > Guides > Snap to guides to make Positioned Boxes (and any other objects that have their position set to absolute) snap to guides when moved within a few pixels of them.

To delete a guide, double-click on it and press the Delete button.

Using the CSS position property

An element can be positioned independently of the text flow by changing its position property to absolute or to relative (that is, relative to the 'parent', its container).
When an element is placed inside another element, such as a Box, changing its position property to absolute positions the element absolutely inside its parent.
With the position property of an element set to absolute, the top or bottom and left or right properties position the element inside its parent with exact values: pixels (px), centimeters (cm), etc. Negative values are allowed.

Tip: You can quickly change the position property of an element in a Print section by right-clicking it and selecting Convert to Absolute or Convert to Inline.

For an explanation of all values that the position property can possibly have, see MDN Web Docs - position.

Where to use it

In Print sections, setting the position property to absolute can be very useful. It takes the element out of the text flow, so that the element stays where it is on the page. On Master Pages (which are only used in Print sections) elements are always positioned absolutely; if not, they must be located inside an element that has an absolute position.

How to use it

In the Formatting dialog the position property can often be found on the first tab, under Positioning. To open the Formatting dialog, right-click the element and click the respective element on the shortcut menu. Alternatively, select the element (see Selecting an element) and on the Format menu click the respective element.

This property isn't present in one of the tab menus of the style rule editor, but you can add it and specify a value after clicking the Advanced button in the style rule editor (see Styling templates with CSS files).

About the CSS display property

The display property is one of the most important CSS properties for controlling layout. Yet it is unlikely that you will use it often to position elements in a template: in most cases, the initial value of the display property for an element will be the right one.
It is more likely that you will use this property in style sheets and scripts to hide certain elements, by setting the value of this property to none(display: none;). (See Styling templates with CSS files and Writing your own scripts.)

For an online tutorial, see MDN Web Docs - grid layout.