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.
Navigate to the page you want to edit.
Click Insert More Content > Other Macros.
Select the Div macro from the Macro Browser.
Define the styling for the content using the following parameters:
Option to specify a unique ID for this element. If using this parameter to apply styling to the element, do not include the
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.
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.
Enter the text to display in a tooltip
Sets the text direction
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.
defor German. Browsers will identify that the content is written in German.
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.
Click Insert. The macro placeholder displays.
- Enter the body content as required then save the page to render the macro on the page.
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.
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
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:
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.