I don’t think so. I didn’t specify any float, and the div containers are in a grid, so the float is irrelevant, right?
My CSS for the div containing the TOC is the same as shown in the tutorial. I think the TOC appears to the right because the total width of the columns (1220px) is greater than the width of .inner, so the columns overflow to the right.
I was thinking you could try floating the TOC div, so your layout does not need a third column. It would also leave the original layout intact, requiring fewer additional modifications.
If you want to either post or pm me the URL for your test site I can test and show you my thinking.
Alternatively, I can spin up a test site in just a few minutes, upload your current work-in-progress and we can work it out together.
I followed the tutorial linked above by @DavidDarnes and added the TOC to the Casper theme, and added this CSS to make it fixed at the top right and exclude/hide it on smaller screens:
<style>
.toc {
position: fixed;
top: 100px;
right: 0;
width: 250px;
font-size: .8em;
}
ol.toc-list {
margin: 0;
padding-right: 20px;
}
@media (max-width: 1170px) {
.toc {
display:none;
}
}
</style>
The result is shown on this page:
https://ghost-o-matic.com/add-a-table-of-contents-to-your-posts-and-pages/
Also, in Casper and Lyra, the Featured Image can be made more narrow (matching the width of the rest of the post content), if you want to keep it out of the way of the fixed TOC styled as above, by also adding this to the CSS:
.post-full-image {
background: transparent;
padding: 0 170px;
}
The styles provided in the tutorial are just a starting point, you can use CSS however you like to make something custom just for you 
I made the choice to move the post content area to the left so the table of contents nav had space on the right hand side. You’ll notice that if you reduce the browser width in the layout you have made the table of contents will get cut off by the browser window, or wrap under the content.
As for the h3 headings, they get revealed when the h2 immediately above them has been clicked. You can see this happening in this gif when “Working with images in posts” is clicked:
Either that or you don’t have enough content under the heading. The collapsing feature can be turned off in Tocbot by adding collapseDepth: 2 to the configuration. More into on the Tocbot docs:
I’ve got a problem with headings that come directly after images in the post content.
When I click on a heading in the side-panel Table of Contents the content successfully scrolls to the proper place (the heading ends up at the top of the screen). However, when I click on a heading in the side-panel whose heading in the content is directly after an image the screen scrolls and ends up with the image being at the top of the screen, the heading then below the image.
I can somewhat fix this with a workaround by inserting an HTML card with <p> </p> between the image and the heading (simply <p></p> doesn’t work), but then that ends up creating a gap (which I suppose I could remedy with CSS).
Anybody know of some way that this could be fixed without having to resort to that workaround?
EDIT: Solution below.
That seems like a strange bug, especially since it’s not happening in the gif (one of the headings clicked is directly after an image). I’m guessing this is a CSS layout issue
Yes, sorry, I forgot to mention that: I see that when you click on “Rich editing at your fingertips” in your gif that it works fine.
Do you mean to say that the problem I’m having comes down to something in the CSS of the theme I’m using? And if so, any idea what I might try and look for?
Yes, but I’d need to see the page in order to give any sort of response 
If you’d be willing to take a look then sure, thanks! I’ve just sent you a DM with a demo link.
If anybody else ever has this problem in the future I came up with a solution.
David suggested I add clear: both to my headings, although this created some spacing problems. If that happens to you then you can rectify this by adding some negative margin-bottom to the <figure>. Adding negative margin-top to the h2 or h3 did nothing for some unknown reason.
Here’s the CSS:
.post-content h2,
.post-content h3 {
clear: both;
}
.prior-to-heading {
margin-bottom: -50px;
}
For the image you’re going to have to utilize an HTML-card, which will basically look like this:
<figure class="prior-to-heading">
<img src="____">
<figcaption></figcaption>
</figure>
If you don’t know how to set up an image with an HTML-card I explained that here (skip the bit about adding in the <a> tag).
My solution to the problem that @Stromfeldt mentioned about the video showing was to reduce the height and margin-top in the CSS from the tutorial. For Casper/Lyra, we can change it to 64px/-64px instead of 84/-84px. @DavidDarnes the problem could be more apparent if you were to create a new tab in your browser and go directly to the url /the/url/#rich-editing-at-your-fingerprints. On refresh, the screen might slide up a little bit to show the image.
@DavidDarnes The problem with the missing t3 headers does not apply to the sticky TOC, but to the non-sticky TOC. For an example, please see the second photo in response 17. In that photo, the first H3 header shows in the TOC, but the second and third don’t. Additionally, there’s a weird space for each h3 title.
@denvergeeks Thank you very much for posting how you implemented a fixed TOC in the top right. (I don’t know very much CSS.) I used your code with a small adjustment: I changed the max-width to 1220px to account for both sides and the padding (700 + 250 + 250 + 20) so there’s no possibility of overlap of the main text and the TOC.
With the tocbot script introduced by @DavidDarnes and above script written by @MLFromScratch, we can have a manually written TOC on top and a side TOC. Here’s an example. If we choose to keep the script by @MLFromScratch to be able to manually write TOC, I think we need to change the OFFSET_HEIGHT_PX to 0 because of the changes we made to .post-content h2::before and .post-content h3::before .
Edit: Do you know how to change the color of the ‘you are here’ line in the side TOC? I think the default is some shade of green.
Thanks everyone!
Nope, that wasn’t my issue as what you’re referring to is the header bar overlapping things (which I’ve also accounted for in the manner that you mention).
What I was referring to is a problem that exists if there is a <figure> directly before the H2/H3. If so, when clicking on a link in the Table of Contents the result is that after the automated scroll the entire <figure> is displayed at the top of the screen (whether it be 200px in height or 600px in height, etc.), with the H2/H3 then below the <figure>. I think it’d be a fairly obscure issue, due to either my custom CSS or the in-built CSS of the theme I’ve adapted. The code I mentioned above fixed the issue.
So it would be:
<style>
.is-active-link::before {
background-color: #54BC4B; <- replace the color you want it to be
}
</style>
Also, if you want to narrow the featured image to keep it out of the way of the right side TOC, you can add this also to the CSS in your Site Header Injection (or to the Page Header Injection for just the one page):
<style>
.post-full-image {
margin: 25px 170px 50px;
}
</style>
You only need one pair of < style> and < /style> tags in the Header Code Injection (and keep adding to all of the bits of CSS in between) like this:
<style>
.is-active-link::before {
background-color: #54BC4B;
}
.post-full-image {
margin: 25px 170px 50px;
}
</style>Thanks a lot for your help, @denvergeeks! I think I’ll keep the full width of the feature image for now.
@Stromfeldt Sorry I didn’t understand the problem you mentioned earlier. I think I was thinking about a different problem, where Vimeo embeds mess with subsequent headers on Lyra/Casper, and mistakenly thought the two problems were the same. (The Vimeo problem is noticeable on my example site when refreshing with crtl/cmd + shift + R).
Also, for future readers, if you want the non-sticky to show up on small screens but sticky to show up on big screens, you can use:
<style>
@media (min-width: 1220px) {
.toc {
overflow-y: auto;
position: fixed;
top: 100px;
right: 0;
width: 250px;
font-size: .8em;
}
ol.toc-list {
margin: 0;
padding-right: 20px;
}
}
</style>
However, it seems to me that the tocbot script doesn’t work very well on mobile, at least on iPhone’s Safari.
Anyone have any idea how to implement TOC based on Tags and Posts?
Exactly as seen on the Ghost documentation site.
I tried to join a series of helper tags but without success. Even if I were to succeed I wouldn’t know how to implement Javascript for interaction as a TOC
@giacomosilli I absolutely do recall seeing a theme 
with that very functionality – I’ll try to remember where…
So @giacomosilli what is on the Ghost Docs is not a TOC at all.
It’s just a menu styled like a TOC.
Notice when you scroll down the page it doesn’t change at all - actually just scrolls out of view (I’d rather that it was static, actually.)
Here is the theme I was remembering with a menu that behaves like the Ghost Docs:
I’m tinkering with that theme on one of my test sites, where I’ve integrated a per-post TOC that appears at the bottom left whenever you are on a post or page.
https://docuhub.ghost-o-matic.com/tag/getting-started/
What I think would be neat is your idea, where the two were integrated into one mother-of-all expanding/contracting contextual accordion menu tree.
This is exactly what I was looking for, I would add a limited list of posts of each tag associated with the current post you are reading.
it’s a nice template good job, you should take care of it and sell it, or better make it open :)
Would you share the code to let me create the side menu?