title: Position a sidebar to absolute left, from within a container, but keep the height of the sidebar
body: <p>A weird one... I have a website with a container for 960px, with a sidebar inside it... I need to position the sidebar to the absolute left, however I still need the sidebar to have a height, so the page is as large as the sidebar, so that the footer sits below it... </p>
  
  <p>Please look at the links so I've got the whole setup in there</p>
  
  <p>So an example of what I started with is this:</p>
  
  <pre><code>    .sidebar {
      background:#fff;
      border: solid 1px #000;
      width:100px;
      float:left;
      margin:25px;
  
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/nMeqp/3/" rel="nofollow">http://jsfiddle.net/nMeqp/3/</a></p>
  
  <p>And what I've been able to do is the below:</p>
  
  <pre><code>    .sidebar {
      background:#fff;
      border: solid 1px #000;
      width:100px;
      float:left;
      margin:25px;
      position:absolute;
      left:25px;
  
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/nMeqp/2/" rel="nofollow">http://jsfiddle.net/nMeqp/2/</a></p>
  
  <p>So what I want is kinda like the second one, however I need the sidebar to have a height... </p>
  
  <p>The way the site is setup I can't just remove the sidebar from the container, trust me I've tried for hours. </p>
  
  <p>I need this positioned to the left of the browser window, not the wrapper.</p>
  
  <p>Any help would be awesome!</p>
  
  <p>Thanks. </p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I just hid the element and used jQuery to fade it in and move it outside of the wrapper at the same time. </p>
  
  <p>jQuery('.sidebar').prependTo(".page").fadeIn()</p>
  
  <p>Thanks for your help</p>