Posted by Frankie Liu on
URL: https://discuss.asciidoctor.org/TOC-positioning-wrt-to-content-in-default-css-tp8235.html

I have been staring at asciidoctor.css for a while trying to figure out how it achieves the position of both of these elements:
the toc with respect to the content.

This is what I know:

For toc-right there is an extra padding-right: 15em,
This is compared with at toc-left which defaults to body.toc2 which has a padding-left: 15em

But I have been trying to figure out how the toc2 and content are positioned with respect to one another to achieve the nice effect of one followed by the other. For example the toc element comes before content (in both cases), so that when the window becomes small enough, the toc pops to the top of the content (nice desirable effect). But I was wondering what makes toc-right show to the right of the content div (conversely for toc-left). And what sets the min window width threshold at which the toc pops to the top of the content.

I looked for different ways of achieving vertical split in css, but they all rely on some form of 'grid' like split of the horizontal space, but I don't think this is happening here, sorry for the newbie question. The closest that comes to this is using a float or a inline-block, both techniques not being used in asciidoctor.css. If you can point out to me how this is done, or can recommend some post/reference to how this is accomplished that would be greatly appreciated.

Related to this question is: what makes the toc independently scrollable wrt to the content?

Thanks in advance.