# Pluto: Table of Contents´ position

**URL:** <https://discourse.julialang.org/t/pluto-table-of-contents-position/110111>\
**Category:** General Usage\
**Tags:** pluto\
**Created:** [February 12, 2024, 5:32pm UTC](https://discourse.julialang.org/t/pluto-table-of-contents-position/110111 "2024-02-12T17:32:29Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![VivMendes](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/vivmendes/32/16477_2.png) [@VivMendes](https://discourse.julialang.org/u/VivMendes)\
**Post date:** [February 12, 2024, 5:32pm UTC](https://discourse.julialang.org/t/pluto-table-of-contents-position/110111/1 "2024-02-12T17:32:29Z")

</div>

Hi,

Does anyone know how to force the Table of Contents to be kept at a fixed distance from the main body of the Pluto window? When we change the size of the browser’s window, the Table of Contents can overlap with Pluto’s main body or be too far away from the main body.

Thanks

---

<div class="post-metadata">

**Author:** ![abraemer](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/abraemer/32/51403_2.png) [@abraemer](https://discourse.julialang.org/u/abraemer)\
**Post date:** [February 13, 2024, 7:12am UTC](https://discourse.julialang.org/t/pluto-table-of-contents-position/110111/2 "2024-02-13T07:12:55Z")

</div>

I don’t really understand what you want to happen. Where should the TableOfContents go when the window gets too small?

In principle you can fully control the CSS of everything just be making a Pluto cell and writing something like this (example makes the cells wider which I occasionally use):

```julia
html"""
<style>main {max-width: 60%}</style>
"""

```

---

<div class="post-metadata">

**Author:** ![VivMendes](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/vivmendes/32/16477_2.png) [@VivMendes](https://discourse.julialang.org/u/VivMendes)\
**Post date:** [February 13, 2024, 1:15pm UTC](https://discourse.julialang.org/t/pluto-table-of-contents-position/110111/3 "2024-02-13T13:15:20Z")

</div>

@abraemer, thanks. I need to avoid the Table of Contents overlapping with Pluto’s main window when we make the browser’s screen bigger. The notebooks are for teaching, and frequently, we have to increase the size of what is displayed.

I borrowed from @steffenPL a piece of code that solves the problem:

```julia
html"""
<style>
      @media screen {
            main {
                  margin: 0 auto;
                  max-width: 2000px;
            padding-left: max(100px, 10%);
            padding-right: max(383px, 10%); 
            # 383px to accomodate TableOfContents(aside=true)
            }
      }
</style>
"""

```

Thanks.

---

<div class="post-metadata">

**Author:** ![George9000](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/george9000/32/23619_2.png) [@George9000](https://discourse.julialang.org/u/George9000)\
**Post date:** [February 13, 2024, 7:04pm UTC](https://discourse.julialang.org/t/pluto-table-of-contents-position/110111/4 "2024-02-13T19:04:33Z")

</div>

You may also take a look at [this thread](https://discourse.julialang.org/t/ann-plutostyles-jl-override-styles-of-pluto-notebooks/64280) and [repository](https://gitlab.com/aplavin/PlutoStyles.jl).