title: Making two column divs equal height
body: <pre><code>&lt;div id="content"&gt;
    &lt;div id="leftColumn"&gt;
      left column stuff
    &lt;/div&gt;
    &lt;div id="rightColumn"&gt;
      right column sidebar stuff
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When the left column is longer than the right, the right column's background image gets cut off. How do I make both columns the same height?  (I tried applying a background image to the content div and it fixed the problem, but some pages don't use the sidebar so I'm trying to look for another solution).</p>
  
  <p>the columns also can't be fixed height.</p>