Boxes

Boxes are elements that are used to surround other elements, either to style them, to find them, or to place them in specific locations.

Tip: Wrapping elements in a box (or in a semantic HTML element) makes it easier to target them in a script or in a style sheet. Place the cursor in the element or select multiple elements. Then, on the menu, click Insert > Wrap in Box. You can now use the wrapper element as a script's or style's selector; see Using the Text Script Wizard and Styling and formatting.

Tip: With the Copy fit feature, text can automatically be scaled to the available space in a Box or Div. See Copy Fit.

Positioned Box

A Positioned Box is one that can be freely moved around the page and does not depend on the position of other elements. A positioned box is actually a <div> element that has an absolute position; in other words, it has its CSS property position set to absolute (see also: Using the CSS position property).

Positioned Boxes are suitable for use in Print templates only.

Adding a Positioned Box

To insert a Positioned Box, use the icon on the toolbar.

Or, keep the Ctrl key pressed down while dragging an image or a data field into the template. This inserts a Positioned Box with the image or an expression in it. (See: Adding images and Variable data in text: expressions.)

Moving and resizing a Positioned Box

Positioned Boxes can be moved by dragging the borders, and resized using the handles on the sides and the corners. Pressing any arrow key moves the box by 1 pixel in the direction of that key.
Alternatively the size and position can be set on the Attributes pane. Note that the size and offset values will be displayed in the default print units as defined in the preferences.

  • To move or resize multiple Positioned Boxes at the same time, hold the Ctrl key while selecting them. You could either select them in the Design view (the main editor) or in the Outline pane.

  • Hold the Shift key while resizing a Positioned Box to ensures that the box retains its aspect ratio.

  • Hold the Shift key while dragging a Positioned Box to move it horizontally or vertically.

Dynamically changing the position

A Positioned Box in a Print section (not in a Master Page) has the following attributes:

  • anchor defines the page number (starting by 0) the box is placed on

  • offset-x defines the horizontal position of the box relative to its container

  • offset-y defines the vertical position of the box relative to its container.

These attributes can be set in a script. The following script dynamically changes the position of a Positioned Box in a Print context by setting the offset-x and offset-y values.

results.attr('offset-x','96');

results.attr('offset-y','96');

The measurements are in pixels (e.g. 96px = 1in). Note that you do not need to set the units.

Note: Do not set the top or left property of a Positioned Box in a style sheet. The position of a Positioned Box in a Print context is handled via its attributes to take the page (or Master Page) and page margins into account. Attributes cannot be overwritten from within a style sheet: style sheets specify style properties, not values of attributes.

Styling a positioned box

A Positioned Box can be styled using the Format > Box menu item, through the CTRL+M keyboard shortcut, or through CSS; see Styling and formatting and Styling templates with CSS files.

For tips on aligning text in a positioned box, see Aligning text.

Inline Box

An Inline Box is one that is placed within the text flow, where other elements (including text) can wrap around it. An inline box is actually a <div> element that is floating; in other words, it has its CSS property float set to left, right or no float.

Inline Boxes can be used in Print context and in Web pages. It is common to do entire web layouts using the float property. In Email templates, it is best to use Tables to position elements.

Tip: In Print sections, an Inline Box can be aligned to the bottom of the last page. See Align a box to the bottom of the last page for instructions.

Adding an Inline Box

To insert an inline box, use the icon on the toolbar. Inline Boxes can be resized using the handles on the sides and corner. They can be styled using the Format > Box menu item, through the CTRL+M keyboard shortcut or through the CSS files; see Styling and formatting and Styling templates with CSS files.

Positioning an Inline Box

Initially an Inline Box will float to the left. Use the (Float left), (No float) and (Float right) icons on the toolbar to change the position of an Inline Box within the text.

  • The Float leftbutton aligns the Inline Box to the left. The text is positioned to the right of it and is wrapped around the box.

  • The Float rightbutton aligns the Inline Box to the right, with the text wrapped around it to the left.

  • The No float button positions the Inline Box where it occurs in the text.

It is not possible to move an Inline Box using drag and drop. To move the Inline Box to another position in the text, you have to edit the HTML on the Source tab in the Workspace, moving the <div> element using cut and paste. To open the Source tab, click it (at the bottom of the Workspace) or select View > Source View.

Span

The Span element (<span> in HTML code) is used to group inline elements, such as text in a paragraph. A Span doesn't provide any visual change by itself, but it provides a way to target its content in a script or in a style sheet.

To wrap content in a span, select the text and other inline elements and click Insert > Wrap in Span on the menu. Give the span an ID if you are going to add a style rule or script for it that is unique to this span; or give the span a class if this span can be targeted by a style or script along with other pieces of content. Now you can use the wrapper's ID or class as a script's or style's selector; see Using the Text Script Wizard and Styling and formatting.

Div

The Div is the element used to create both Positioned Boxes and Inline Boxes. By default, a Div element reacts pretty much like a paragraph (<p>) or an inline box set to 'no float' except that it can be resized directly. Just like Positioned Boxes and Inline Boxes, Div elements can be styled using the Format > Box menu item, through the CTRL+M keyboard shortcut or through the CSS files; see Styling and formatting and Styling templates with CSS files.

Adding a Div element

To add a Div, select Insert > Structural Elements > Div on the menu. For an explanation of the options, see Inserting an element.

HTML tag: div, span

When you add elements, such as text, images or a table, to the content of a template, you are actually constructing an HTML file. It is possible to edit the source of the HTML file directly in the Designer; see Editing HTML.

In HTML, boxes are <div> elements. Spans are <span> elements. To learn how to change the attributes of elements, see Attributes.