Floating TOC in the right column

Hi all,

I have a page with a two columns layout and I put a TOC on the right one. I would like to have the TOC always visible even though when I do scroll down. Is there any nice macro solution for this?

I get some results via CSS, setting a name for the div of the TOC and adding some CSS code like

.fixedPosition {   


    margin0 auto;      


     top: 200px 

any better option?

Many thanks.


3 answers

1 accepted

I use this css in a two column page layout, for a floating scrollable TOC on the right side.The two column page does not let the content overlap with TOC.

Screenshot:Screen Shot 2018-06-08 at 11.20.15 PM.png



.rightFloat {
position: fixed;
height: 600px;
overflow: auto;
top: 100px;


I'll try that out. Thanks much!


What is the macro that you've got the ccs stylesheet on the page?

In Other Macros, there is no such thing.


Thank you. 

Name of the macro is CSS Stylesheet. 

I disagree because there is no such thread on marketplace.atlassian.com. :(



Thanks for this! I got decent results via CSS like this. It's a simple, half-transparent light gray box with a thin blue border that stays visible at the top right of the screen.

.toc-btf {
    float: right;
    position: fixed;
    width: 300px;
    right: 0px;
    top: 170px;
    background: rgba(229, 232, 232, 0.5);
    border: 1px solid #0096d6;
    padding: 5px;

This worked best when I put the TOC with the toc-btf class as the very first thing on the page.

The only annoyance is that other Confluence macros / page parts overlap the TOC in a distracting way. This is minor, but I would rather have the Note's yellow box be under, not over the TOC. If there is an adjustment I can make to CSS please tell me. 

I'm a space admin, not a Confluence admin, so my options are limited. I did see the linked solutions above but they're not an option for me.


I have a solution for your problem. Just move the macro with CSS style to the end of the page so that all the other macros used on the page are above CSS style. See picture. :)


That worked! Thank you!

Suggest an answer

Log in or Sign up to answer
How to earn badges on the Atlassian Community

How to earn badges on the Atlassian Community

Badges are a great way to show off community activity, whether you’re a newbie or a Champion.

Learn more
Community showcase
Published Sunday in Agility

You asked for it, so we delivered: images on issues have arrived

A picture tells a thousand words. And agility boards have just released their latest feature: cover images on issues – so now your board can tell a story at first glance. Upload attachmen...

217 views 2 11
Read article

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you