The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS for moving around sticky div

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #280218


    I’ve been running a blog here: It’s Jekyll with minima theme, though modified a bit at this point.

    If you look at my posts, you’ll see that almost all start with a table of contents at the top. What I’d like to do is move that so that it’s off to the left side of the content. And I did that, sort of. I’ve modified the default.html layout to look like this:

        <main class="page-content sidebar-container" aria-label="Content">
        {% if page.sidebar %}
        {% endif %}
    {{ content }}

    And have custom.css that’s loaded by the page:

    .sidebar {
        height: 75vh;
        position: -webkit-sticky;
        position: sticky;
        top: 20%;
        margin-left: 10px;
    .sidebar a {
        padding: 6px 8px 6px 10px;
        text-decoration: none;
        font-size: 16px;
        display: block;
        color: #e6e6e6;
    .sidebar ul {
        list-style: none;
        margin-left: 5px;
    .post-by-sidebar {
        /* width: 80% */
    .sidebar-container {
        display: flex;
        justify-content: space-between;

    This gets me close:

    The TOC has the desired behavior of staying in place as the user scrolls up and down. There’s two things I’d like to change:

    1) It’s stuck way to the left. I can push it over using padding/margins, but that only works for a single screen size. I’d like it to float towards the main column and push up against it, with a defined padding.
    2) It pushed the center column off-center. Before I started messing around, the left side of the content was aligned with the page title.

    Any suggestions to achieve what I’m looking to do?


Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.