title: Sidebar that changes content width
body: <p>I am currently developing a plugin for existing websites.<br />
  Its purpose is to display a sidebar with my content. To that end, the website owner creates an empty div, references my javascript file and calls my code with the ID of the empty div.</p>
  <p>My plugin is then creating an iFrame in that empty div and loads its content. It also is responsible for styling the provided div so that it actually is a sidebar: It changes the width and height of that div and attaches it to the right edge of the screen.</p>
  <p>So, all of that is basically working - loading my iFrame and styling the div.<br />
  The problem is that I am not satisfied with the result.</p>
  <p>I have tried two different styles for the div:</p>
  <h1>Approach 1: float right</h1>
  <p>I used this CSS:</p>
  <pre><code>float: right;
  height: 100%;
  width: 100px;
  </code></pre>
  <p>The problem with this is that it doesn't change the total width of the rest of the page. In other words, elements on the website with a <code>width: 100%</code> will be shown below my sidebar.</p>
  <p><a href="https://jsfiddle.net/DHilgarth/mmzefm14/" rel="nofollow noreferrer">https://jsfiddle.net/DHilgarth/mmzefm14/</a></p>
  <h1>Approach 2: Absolute positioning</h1>
  <p>I used this CSS:</p>
  <pre><code>position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100px;
  </code></pre>
  <p>This approach has the problem that my sidebar now simply overlaps the controls from the website.</p>
  <p><a href="https://jsfiddle.net/DHilgarth/34hmnw9h/1/" rel="nofollow noreferrer">https://jsfiddle.net/DHilgarth/34hmnw9h/1/</a></p>
  <p>Is there a way to achieve what I want? A sidebar that basically reduces the available size of the <code>body</code> for all elements, except mine?</p>