TABLES AND LAYOUTS

Div

The Div (division tag) can be placed anywhere in the body of a page allows content to be divided into areas or blocks as alternative to tables. The Div tag can hold other tags that affect the formatting of the text following it on the page. 'Tags' are control/formatting commands in HTML format (accessed by right-clicking the Div icon).

To insert a Div:

Position the text marker where you want to insert the Div.
Click the Div icon () on the Toolbar.
Right-click in the Div and select Div Properties from the menu to change the default Div attributes.

Div Properties

Use the Settings button to open Div attributes and to modify them.

Main Div tab sets attributes for whole Div, while in Div Column tab you set settings separately for each column (in case you use Div with more than one column).

When you change settings, press the Refresh button to see the result in the Preview area.

To load predefined settings or save current settings and use them later for another object, use the Presets option (at the top left corner). For more information see Presets.

Main Div

Main

ID (edit box) - Assigns a name to the Div. This name must be unique in a page.
Title (edit box) - Offers advisory information about the Div.
Tag Attributes (edit box) - Define any additional custom attributes in HTML format for the Div tag (Advanced users only).

Position/Size

Position (drop-down menu) - Set the position type - static, absolute or relative.
Left (edit box) - Set the left position for the Div element (applicable when relative or absolute position is set).
Top (edit box) - Set the top position for the Div element (applicable when relative or absolute position is set).
Right (edit box) - Set the right position for the Div element (applicable when relative or absolute position is set).
Float (drop-down menu) - Wrap text around the Div element. You can select between None, Left and Right.
Width (edit box) - Div element width.
Height (edit box) - Div element height.

Width and height are set in px (pixels) as default. To use percent, make sure to include % sign.

Z-Index (edit box) - This attribute allows you to use the divs in your page as layers and sets the layer position for certain Div.

Background

Div background. For more information see Background Properties.

Padding

Sets padding space around the Div. For more information see Padding Properties.

Margins

Sets div margins. For more information see Margins Properties.

Border

Sets borders for the Div. For more information see Border Properties.

Border Radius

Create round corners to the div box (when visible). For more information see Border Radius.

Additional

Overflow (drop-down menu) - Specifies whether the content of the Div element is clipped when it overflows the element's box (which acts as a containing block for the content). Values have the following meanings:

Visible - Content is not clipped, i.e., it may be rendered outside the Div box. Hidden - This value indicates that the content is clipped and that no scrolling mechanism should be provided to view the content outside the clipping region; users will not have access to clipped content. Scroll - This value indicates that the content is clipped and that if the user agent uses scrolling mechanism that is visible on the screen (such as a scroll bar), that mechanism should be displayed for the Div whether or not any of its content is clipped. Auto - The behavior of the 'auto' value is user agent-dependent, but should cause a scrolling mechanism to be provided for overflowing Div's.

Opacity (number selection box) - Set a blending effect for the content of the Div element.
Direction (drop-down menu) - Match the direction of the text. Change default value if you use Hebrew or Arabic.

Columns

Select here certain column and set its attributes below:

ID/Title

ID (edit box) - Assigns a name to the Div column. This name must be unique in a page.
Title (edit box) - Offers advisory information about the Div column.

Background

Sets a background for the Div Columns. For more information see Background Properties.

Size

Width (edit box) - Sets the Div column width. Make sure to define width value in px.
Opacity (number selection box) - Sets blending effect for the content of the Div column.
Overflow (drop-down menu) - Specifies whether the content of the Div column is clipped when it overflows the element's box (which is acting as a containing block for the content). Values have the following meanings:

Visible - Content is not clipped, i.e., it may be rendered outside the Div column box. Hidden - Content is clipped and that no scrolling mechanism should be provided to view the content outside the clipping region; users will not have access to clipped content. Scroll - The content is clipped and that scrolling is visible on the screen (such as a scroll bar), that mechanism should be displayed for the Div column whether or not any of its content is clipped. Auto - Behavior is browser-dependent, but should cause a scrolling mechanism to be provided for overflowing Div's.

Padding

Sets padding (spacing) for the Div Columns. For more information see Padding Properties.

Border

Sets borders for the Div Columns. For more information see Border Properties.

Header/Footer

Set header and footer images.