Shorts. by Jeff Kreeftmeijer

Instead of showing horizontal scroll bars, the sidebar on jeffkreeftmeijer.com overflows when there's not enough room to show it. I've been asked how this works a couple of times, so here's a quick demo.

<div class="container">
</div>

<div class="sidebar">
  <div class="ad">
    Ad.
  </div>
</div>

The sidebar <div> has a width of 50% and is positioned absolutely. For this demo, I've made it red, so you can see where it is. The content in the sidebar (colored blue) has a left margin of 310 pixels, which is half of the container (green) div's max-width plus a ten-pixel margin.

div.container{
  max-width: 400px;
  margin: auto;
  position: relative;
  background-color: rgba(0,255,0,0.1);
}

div.sidebar{
  position: absolute;
  top: 20px;
  left:50%;
  width: 50%;
  overflow: hidden;
  z-index: -100;

  background-color: rgba(255,0,0,0.1);
}

div.ad{
  margin-left: 310px;

  height: 400px;
  width: 200px;
  background-color: rgba(0,0,255,0.5);
}

What do you think? Here's an isolated demo.