Div

The Div macro wraps content in a div tag with optional classes and styles. The div tag is a non-visual (by default) element that can be used to apply additional properties to the content contained within it. 

Unlike the Span, 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.

   

5. Define the styling for the content using the following parameters:

   Parameter	Description	Default	Required	Notes
   Text Shown on Hover	Enter text that displays as a tooltip to users on hover.	none
   Inline Style	Option to apply an inline style, using CSS, 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.	none		Avoid using quotes in the class name. This can break the macro
   CSS Class	Use in combination with Global Confluence CSS or a CSS Stylesheet macro that you have added to your page. 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.	none		Avoid using quotes in the class name. This can break the macro
   ID	Specify a unique ID for this element. Use this to link to Tooltip, Dialog, or Rollover Macros.  If using this parameter to apply styling to the element, do not include the # selector.	none
   Text Direction	You can choose ltr (left to right) or rtl (right to left)	none
   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.	none

   Although not strictly required to insert the macro onto a page, the macro does require one of the parameters above to be specified to function properly.

6. Click Insert. The macro placeholder displays.

   
7. Enter the body content as required then save the page to render the macro on the page.

Simple Examples

Add A Border

1. Select the Div macro and click Edit.
2. In the CSS Class field input a name. eg. border
    
3. Add the CSS Style Sheet macro to the page.

4. Inside the CSS Style Sheet, macro type the CSS for the type of border you want. Remember to use the CSS Class you used in your div macro as your selector. eg. The following gives an double red border
   
   
   Published Result
   

   This is some content inside the Div macro.

   
   

Add Inline Styles

If the style you wish to add is simple you can use inline CSS styles to modify the content.

1. Select the Div macro and click Edit.
2. In the Inline Style field input the CSS you want.
   

Here the parameter is set to: background-color: #FEFBFB; border-style: solid; border-color: white; border-left-color:orange; padding:2px;border-width:4px 

Published Result