It's better when it's simple

User Tools

Site Tools


floatdiv Plugin

Compatible with DokuWiki

  • 2017-02-19 "Frusterick Manners" unknown
  • 2016-06-26 "Elenor Of Tsort" unknown
  • 2015-08-10 "Detritus" unknown
  • 2014-09-29 "Hrun" yes

plugin A floating sidebar that can be added to any page

Last updated on

Similar to columns, layout, styler, wrap

Tagged with sidebar

Download and Installation

Download and install the plugin using the Plugin Manager using the URL given above. Refer to Plugins on how to install plugins manually.

Syntax and Usage

Floatdiv has 2 components - the sidebar itself, and headers to be used in the sidebar.


This is a simple floating div used as a sidebar for any page. It can be added simply by using

content goes here

The options available are:

OptionUnitDefaultAccepted ValuesExampleFunction
Side rightright/left rightControls which side to place the sidebar on.
Widthpixel20050-500 width=185Controls the width of the sidebar.
Sizepixel108-20 size=15Controls the font size in the sidebar.
BackgroundHex Color background_neu #000000 - #FFFFFFbackground=#abcdefControls the background color of the sidebar.

Using a width or font size out of the accepted range will cause it to be set to the boundary size.

size=30 => size=20
size=4  => size=8
width=5 => width=>50
width=1000 => width=500


Right sidebar, 180px wide, 12px font size, and #eeeeff for a background color.

[float right background=#eeeeff size=12 width=180]
content goes here

Left sidebar, 50px wide, 8px font size, and #eeeeff for a background color.

[float left background=#eeeeff size=8 width=50]
content goes here


Because normal headers won't work within the sidebar, new header commands were added. These are simple formatting instructions and do not force indents of the following text.

Usage is simple:

~$ header text $~

The number of '$' governs the style of header:

Count Font Size
1100No ~$ lv 1 $~
2125No ~$$ lv 2 $$~
3150No ~$$$ lv 3 $$$~
4175No ~$$$$ lv 4 $$$$~
5175Yes ~$$$$$ lv 5 $$$$$~
6200Yes ~$$$$$$ lv 6 $$$$$$~

Using more than 6 '$' will continue to produce a 200% header with an underline.

You can cheat on the closing tag by using a single '$' with any of the headers

~$$$$$$ lvl 6 header $~ works just as well as ~$$$$$$ lvl 6 header $$$$$$~.

Known Issues

  • Normal Headers do not work within the sidebar - they will not process at all leaving you with the <pre>=== tag ===<pre> sitting in the text.
  • Headers don't wrap with the sidebar on the left, they will move down below the sidebar.


  • This is awesome. I've inserted the code, hit preview and instantly, my page looked fantastic. :-) Thank you very much! Feb 06 2011
  • Really good plugin, thanks a lot !
  • Is this meant to “float” as in scroll up and down with you in the browser window? Jan 21 2015
plugin/floatdiv.txt · Last modified: 2015-09-13 17:48 by Aleksandr