CSS Offset Sidebar Column

Details

• Goal is a main column that's centered (or mostly centered) wish a side colum that's offset so the main column stays largely in the center

EXAMPLE

HTML

<div id="placeholder">----</div>

<div id="wrapper">
  <div id="sidebar">
    The paper box is full of thumb tacks. Lift the square stone over the fence.
  </div>
  <div id="main">
    <p>
      The ramp led up to the wide highway. No cement will hold hard wood. Smoke
      poured out of every crack. He crawled with care along the ledge. This
      plank was made for walking on. Add salt before you fry the egg. The sofa
      cushion is red and of light weight. Pluck the bright rose without leaves.
      Split the log with a quick, sharp blow. The ink stain dried on the
      finished page. The colt reared and threw the tall rider.
    </p>
    <p>
      The point of the steel pen was bent and twisted. No hardship seemed to
      keep him sad. The sun came up to light the eastern sky. The lake sparkled
      in the red hot sun. Jazz and swing fans like fast music. Bring your best
      compass to the third class. Torn scraps littered the stone floor.
    </p>
    <p>
      Once we stood beside the shore. Tend the sheep while the dog wanders. Just
      hoist it up and take it away, He wrote his last novel there at the inn.
      The tree top waved in a graceful way. There are more than two factors
      here. Those words were the cue for the actor to leave.
    </p>
  </div>
</div>

CSS

body {
  background-color: #444;
  color: #ddd;
}

#wrapper {
  display: grid;
  max-width: 1000px;
  margin-left: max(0px, calc(50vw - 450px - 150px));
  grid-template-columns: 150px 1fr;
}

#sidebar {
  background-color: #444;
}

#main {
  background-color: #431223;
}

JavaScript

const kickoff = () => {
    console.log("kickoff")
}

document.addEventListener('DOMContentLoaded', kickoff)

Notes

• I've got Josh Comeau's CSS Reset in place too. The links in the references

References

• Josh Comeau's CSS Reset