It's better when it's simple

User Tools

Site Tools


floatdiv Plugin

Compatible with DokuWiki

No compatibility info given!

plugin A floating sidebar that can be added to any page

Last updated on

This extension has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues.

Similar to columns, layout, styler, wrap

Tagged with sidebar

Download and Installation

Search and install the plugin using the Extension Manager. 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: 2019-01-14 19:44 by LarsDW223

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki