Overview:
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 macro as this would make it easy to apply custom styles to your content. Alternatively you can specify specific styles for each use of the macro.
Parameters:
Add the macro to your page as follows:
{div:class=x y z|style=css}
your content
{div}
 | At least one parameter must be specified You must specify at least one of the parameters below for this macro to work. |
| Parameter | Required | Default | Notes |
|---|---|---|---|
| id | |
An optional id value to apply to an individual div tag. | |
| class | |
The class to associate with the div. Multiple classes can be specified by separating them with spaces. | |
| style | |
An optional inline style sheet to apply to an individual div tag. |
Examples:
Hints and Tips:
If you are using the same inline style several times, create a stylesheet for the class using either the style macro 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
http://www.w3schools.com
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:
|
| 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. |
Comments (9)
Dec 04, 2006
Anonymous says:
Can you please provide an example with multiple inline style decorations? I unde...Can you please provide an example with multiple inline style decorations? I understand we can use a style sheet but...
Example (that's not working):
\{div:style=background:#F0F0F0|border:1px solid #333399|left:1em|right:1em\} loremipsum \{div\}Is only the first style declaration valid?
Thanks,
Liberty Miller, 2006-12-04
Dec 04, 2006
Guy Fraser says:
The style param is the same as the standard HTML style attribute so you need som...The style param is the same as the standard HTML style attribute so you need something like:
{div:style=background:#F0F0F0;border:1px solid #333399;left:1em;right:1em} loremipsum {div}The CSS atribs are split by semi-colons, not pipes.
Jun 10, 2008
john debinder says:
I'm having trouble nesting the div macro. The nested div macro seems to close o...I'm having trouble nesting the div macro. The nested div macro seems to close out it's parent before it acts on the text. We are using
I see the FAQ above and have supplied a style parameter on each one. Does the macro support nesting?
Here is an example:
{div:style=width:100%}
{div:style=background-color:lightgreen}header{div}
{div}
Jun 10, 2008
Guy Fraser says:
Confluence doesn't support nesting of macros, unfortunately. That's why we added...Confluence doesn't support nesting of macros, unfortunately. That's why we added div2, div3 and div4, etc., macros in to the plugin
{div} {div2}div 2 content{div2} etc. {div}Jun 10, 2008
john debinder says:
Thanks so much for your quick reply. The div2 and div3 macros work fantastic. ...Thanks so much for your quick reply. The div2 and div3 macros work fantastic. I will have to get our Wiki team to document them.
Jan 14, 2009
Ken Stafford says:
It is not clear to me from the documentation and examples how to use the div mac...It is not clear to me from the documentation and examples how to use the div macro in conjunction with the style macro. This is especially the case when mixing in specific CSS panel classes existing within confluence. For instance, I have the div macro defined as {div:class=tree}{pagetree:root=home}{div} with the intent to modify the padding of the list of page links so not to affect other content on the page. I am assuming on the same page that I can place the style macro with the appropriate css parameters. I get stuck not knowing how to combine the '.tree' class with the '.wiki-content ul' class that is already defined within the CSS. The '.tree .wiki-content ul' is not getting recognized by the div macro. I've tried a bunch of different combinations with no success.
{style} .tree ul, ol { padding:0pt 0em; } .tree .wiki-content ul { padding-left:5px; } {style}May 07, 2011
Ken Stafford says:
Funny how I came across this after 2 years. I found out the error of my ways in ...Funny how I came across this after 2 years. I found out the error of my ways in that the div macro does not necessarily have to reference the style macro. In my previous instance I think the div should have been something like {div:class=tree|style=padding-left:5px}{pagetree:root=home}{div} to produce the desired result on the pagetree macro without necessarily affecting another pagetree on the same page.
Feb 04, 2010
Darren Smith says:
Can anyone tell me how I can define a custom class to use with the div macro? I...Can anyone tell me how I can define a custom class to use with the div macro? I am familiar with CCS and its implementation, but I am new to Confluence. Can I define the class within the same sheet or can I use an external style sheet?
Mar 18, 2010
Melissa C. Wood says:
The DIV macro generates unnecessary empty P tags and ignores my custom CSS. My ...The DIV macro generates unnecessary empty P tags and ignores my custom CSS. My code is syntax is correct. I've posted to the forums. Can anyone please HELP!