title: Position colorbox with a left margin
body: <p>I've got a 2-column layout, sidebar on the left (width: 220px), content to the right, fluid width. I want the colorbox-content to appear over the content-area only, so initiated colorbox like that:</p>
  
  <pre><code>$('a#colorbox-load').colorbox({top:20, left:220});
  </code></pre>
  
  <p>Problem is: because the colorbox has same width as before, it now cuts the content off on the right side, the content exceeds the viewport. Since i want the colorbox to be responsive, i could not give a hardcoded smaller width to compensate the shift to the right.
  What's the approach?</p>
  
  <p>Desired Layout:</p>
  
  <pre><code>+------+----------------------------------+
  |      |                                  |
  |      |  +----------------------------+  |
  |      |  |                            |  |
  |      |  |                         X  |  |
  |      |  |                            |  |
  |      |  |                            |  |
  |      |  |                            |  |
  |      |  |                            |  |
  |      |  |                            |  |
  |      |  +----------------------------+  |
  |      |                                  |
  +------+----------------------------------+
  </code></pre>