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 you can specify specific styles for each use of the macro.
Click Insert > Other Macros.
Select the Div macro from the provided list.
Complete the desired fields.
Specify a unique id for the element.
|Class||The class to associate with the div. Multiple classes can be specified by separating them with spaces.||string||none|
|Style||An optional inline style sheet to apply to an individual div tag.||string||none|
|Title||Text to display in a tooltip.||string||none|
|Text Direction||Sets the text direction.||single select||none|
|Language Code||Sets the language code.||string||none|
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.
The macro will then appear on the page.
To define a custom class, use the "class" parameter.
This will add the following HTML to the page.
In this example, we've hijacked the "warningMacro" class used by the warning macro to put a red border and background on the text contained within the div.
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.
This will add the following HTML to your page:
Where can I learn more about CSS and Div tags?
as they have full tutorials on CSS and HTML.
My nested DIVs aren't displaying properly
Confluence doesn't support nested tags, so the following were created to support nested DIVs:
My div tag is outputting </div> at the start instead of <div> - why?
You must specify one or more of the parameters (style and/or class) for the macro to work properly.