Html Question posted in
Some basic documentation can be found here.

Quarto 20:60:20 html layout on multiple screens

I am unable to achieve a reasonable layout of quarto html output. On wide screens there are 2 extra spaces left/right on top of standard sidebar / margin, and I am loosing TOC when playing with column-page etc. features. Layout full with TOC makes the content not centered…

I would simply want left 20% of the screen, on all screen sizes, to be a sidebar with TOC, middle 60% to be the content, and right 20% to be (empty) margin. Do not know how to achieve that.

grid:
sidebar-width: 20%
body-width: 60%
margin-width: 20%

fails on some preset in px which is not compatible with %. No combination of grid setting in pixels achieved the desired output.

I am using Quarto 1.4.554

Tags:

2

Answers


  1. 0

    simply use a 2-column layout where youa dd a right-margin of 20vw. Then you can split the remain 80vw in a "1fr 3fr" split:

    * {
  box-sizing: border-box;
}

body {
  margin: 0 20vw 0 0;
  display: grid;
  grid-template-columns: 1fr 3fr;
}

aside {
  width: 20vw;
  border: 2px dashed blue;
}

main {
  border: 2px dashed red;
}
    <body>
  <aside>Sidebar</aside>
  <main>Content</main>
</body>
    Login or Signup to reply.
  2. 0

    Simply use a 3 column grid and don’t use the 3rd column

    .container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  gap: .25em;
}

aside {
  background: lightblue;
}

main {
  background: lightgreen;
}
    <div class="container">
  <aside>Sidebar</aside>
  <main>Main Content</main>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search