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 its 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 CSS Style Sheet making it easy to apply custom styles to content. Alternatively specific styles may be specified for each use of the macro.

Instructions

  1. Navigate to the page you want to edit.

  2. Click Edit.

  3. Click Insert More Content Other Macros.

  4. Select the Div macro from the Macro Browser.

    The Macro Browser with the Div macro available.
  5. Define the styling for the content using the following parameters:

    Parameter

    Description

    Type

    Default

    Required

    ID

    Option to specify a unique ID for this element. If using this parameter to apply styling to the element, do not include the # selector.

    string

    none

    (error)

    Class

    Option to apply a custom CSS class to the element. Enter the CSS class name(s) to apply to the macro (case sensitive); multiple classes can be separated by a space or comma. Do not include the . selector in the class name. Classes must be part of your Global Confluence CSS or defined in a CSS Stylesheet macro that you have added to your page.

    string

    none

    (error)

    Style

    Option to apply an inline style to an individual div tag body content; useful for adding borders or padding, e.g. border: 3px solid-red. This style does not need to be defined in a CSS Stylesheet macro.

    string

    none

    (error)

    Title

    Enter the text to display in a tooltip

    string

    none

    (error)

    Text Direction

    Sets the text direction

    single select

    none

    (error)

    Language Code

    Enter a language code if you want to specify that the element content language is different from the default language of your page, e.g. de for German. Browsers will identify that the content is written in German. 

    string

    none

    (error)

    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. Click Insert. The macro placeholder displays.

    A placeholder for the Div macro.
  7. Enter the body content as required then save the page to render the macro on the page.

Examples

Custom class

To define a custom class, use the Class parameter to add style from your Global stylesheet or from the CSS Stylesheet macro that you add to the page. In this example, we’ve used a class that we defined in the CSS Stylesheet macro. 

Inline styles

Use the Style parameter to add styling to a specific macro content. It doesn't need to be defined in a macro or separate stylesheet. 

With the Style parameter set to: background-color: #FEFBFB; border-style: solid; border-color: white; border-left-color:red; padding:2px;border-width:4px

If you are using the same inline style several times, create a stylesheet for the class using either the CSS 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; 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.