Content Formatting Macros for Confluence Server and DC

Div

The Div macro wraps content in a div tag with optional class and styles.

The div tag is a non-visual (by default) element that can be used to apply additional properties to content contained within it.

Unlike the span tag, a div stretches to fill the available width of it’s containing element making it ideal for use with blocks of content such as a whole paragraph.

This macro is primarily designed for use with the Style Sheet as this would make it easy to apply custom styles to content. Alternatively specific styles may be specified for each use of the macro.

Usage

  1. Go to the form you wish to edit.

  2. Click Edit.

  3. Click Insert More Content, and select Other Macros.

  4. Select the Div macro from the provided list.

    div 01
  5. Complete the desired fields.

    Parameter

    Description

    Type

    Default

    Required

    ID

    Specify a unique id for the element

    string

    none

    error

    Class

    The class to associate with the div. Multiple classes can be specified by separating them with spaces

    string

    none

    error

    Style

    An optional inline style sheet to apply to an individual div tag

    string

    none

    error

    Title

    Text to display in a tooltip

    string

    none

    error

    Text Direction

    Sets the text direction

    single select

    none

    error

    Language Code

    Sets the language code

    string

    none

    error

    At least one parameter must be specified Although not strictly required to insert the macro on to a page, the macro does require one of the parameters above to be specified to function properly.

  6. The macro will then appear on the page.

    div 02

Examples

Custom Class

To define a custom class, use the "class" parameter.

With the Class parameter set to "warningMacro".

This will add the following HTML to the page.

<div class="warningMacro">This is a div example</div>

Resulting in:

This is a div example

In this example, we’ve used the "warningMacro" class used by the Warning Macro to put a red border and background on the text contained within the div.

Inline Styles

In our last example, we applied a background and border to some content, but there wasn’t any padding between the border and the text. To rectify this we can use an inline style, and make the border a bit bigger.

With the Style parameter set to "padding:3px;border-width:5px".

This will add the following HTML to your page:

<div class="warningMacro" style="padding:3px;border-width:5px">This is a span example</div>

Resulting in:

This is a div example

If you are using the same inline style several times, create a stylesheet for the class using either the Style Sheet or the CSS Custom Styles feature of the Builder theme.

Frequently Asked Questions

Q: Where can I learn more about CSS and Div tags?

A: Try the w3schools site, as they have full tutorials on CSS and HTML.

Q: My nested DIVs aren’t displaying properly

A: Confluence doesn’t support nested tags, so the following were created to support nested DIVs:

  • {div2

  • {div3

  • {div4

  • {div5

  • {div6

  • {div7

  • {div8

  • {div9

They are duplicates of the div macro and support the same parameters.

Q: My div tag is outputting </div> at the start instead of <div> - why?

A: You must specify one or more of the parameters (style and/or class) for the macro to work properly.