title: Using Anchors with Equal Height Columns Hides Content
body: <h2>The Setup</h2>
  
  <p>I'm making a website with a simple 2 column layout. The columns will be of varying height (one taller than the other) and dynamic height (each page's content is different). The two columns' background color should extend down to the lowest point of the longest column's content.</p>
  
  <p>For the visual learners among you, <a href="http://css-tricks.com/fluid-width-equal-height-columns/" rel="noreferrer">CSS-Tricks has some nice illustrations</a></p>
  
  <p><img src="https://i.stack.imgur.com/vTZtA.png" alt="enter image description here"></p>
  
  <p><img src="https://i.stack.imgur.com/CHATS.png" alt="enter image description here"></p>
  
  <h2>The Attempt</h2>
  
  <p>I'm using the <a href="http://css-tricks.com/fluid-width-equal-height-columns/" rel="noreferrer">One True Layout Method</a>, mentioned on the same CSS-Tricks page about half way down.</p>
  
  <p><a href="http://jsfiddle.net/daCrosby/L8WeN/" rel="noreferrer">I've recreated it on jsFiddle here</a>.</p>
  
  <p>Here is the relevant coding</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;a href="#area1"&gt;Go To Section 1&lt;/a&gt;
  &lt;a href="#area2"&gt;Go To Section 2&lt;/a&gt;
  &lt;a href="#area3"&gt;Go To Section 3&lt;/a&gt;
  
  &lt;div id="hold"&gt;
      &lt;div id="col1"&gt;
          Content Column 1
      &lt;/div&gt;
      &lt;div id="col2"&gt;
          Content Column 2
  
          &lt;h2 id="area1"&gt;Section 1&lt;/h2&gt;
          &lt;img src="http://placehold.it/100x750" alt=" placehold img" /&gt;
  
          &lt;h2 id="area2"&gt;Section 2&lt;/h2&gt;
          &lt;img src="http://placehold.it/100x750" alt=" placehold img" /&gt;
  
          &lt;h2 id="area3"&gt;Section 3&lt;/h2&gt;
          &lt;img src="http://placehold.it/100x750" alt=" placehold img" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#hold{
      height:100%;
      overflow-y:hidden;
  }
  #col1, #col2{
      padding-bottom:100000px;
      margin-bottom:-100000px;
  }
  #col1{
      float:left;
      width:200px;
  }
  #col2{
      margin-left:200px;
  }
  </code></pre>
  
  <h2>What Works?</h2>
  
  <p>The layout works entirely as expected. The column heights adapt to dynamic content and always remain the same height as each other.</p>
  
  <h2>The Problem</h2>
  
  <p><a href="http://jsfiddle.net/daCrosby/L8WeN/" rel="noreferrer">Anchors break it</a>. That is to say, the page scrolls down to the proper anchor in the content, but everything above the anchor is hidden. I learned this is due to <code>overflow-y:hidden;</code> - the page is scrolling down to the content and instead of using a scroll bar it's hiding the above content and not just scrolling past it. Disabling <code>overflow:hidden</code> shows all content as expected, but this is not ideal due to the large bottom padding.</p>
  
  <p><a href="http://www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems" rel="noreferrer">Other's have experienced this same problem</a> with <a href="https://www.google.com/search?q=one%20true%20layout%20fluid%20height%20columns%20anchors%20issue" rel="noreferrer">no recognized solutions that I could find</a>.</p>
  
  <h2>Possible Solutions</h2>
  
  <p>I could put together a quick height check in JavaScript and set each column accordingly, but I'd really like to keep overall site layout JS free.</p>
  
  <p>Some articles had mentioned absolute positioning fixed, but this won't work with dynamic content.</p>
  
  <p>Change to a different column height method. But... but... but I already have this one so far! And who are we to simply cave in to <strike>an impossible</strike> a difficult coding challenge.. :)</p>
  
  <h2>The Call for Aid</h2>
  
  <p>Any ideas, fellow programmers?</p>