Using Anchors with Equal Height Columns Hides Content

Question

The Setup

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.

For the visual learners among you, CSS-Tricks has some nice illustrations

The Attempt

I'm using the One True Layout Method, mentioned on the same CSS-Tricks page about half way down.

I've recreated it on jsFiddle here.

Here is the relevant coding

HTML

<a href="#area1">Go To Section 1</a>
<a href="#area2">Go To Section 2</a>
<a href="#area3">Go To Section 3</a>

<div id="hold">
    <div id="col1">
        Content Column 1
    </div>
    <div id="col2">
        Content Column 2

        <h2 id="area1">Section 1</h2>
        <img src="http://placehold.it/100x750" alt=" placehold img" />

        <h2 id="area2">Section 2</h2>
        <img src="http://placehold.it/100x750" alt=" placehold img" />

        <h2 id="area3">Section 3</h2>
        <img src="http://placehold.it/100x750" alt=" placehold img" />
    </div>
</div>

CSS

#hold{
    height:100%;
    overflow-y:hidden;
}
#col1, #col2{
    padding-bottom:100000px;
    margin-bottom:-100000px;
}
#col1{
    float:left;
    width:200px;
}
#col2{
    margin-left:200px;
}

What Works?

The layout works entirely as expected. The column heights adapt to dynamic content and always remain the same height as each other.

The Problem

Anchors break it. 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 overflow-y:hidden; - 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 overflow:hidden shows all content as expected, but this is not ideal due to the large bottom padding.

Other's have experienced this same problem with no recognized solutions that I could find.

Possible Solutions

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.

Some articles had mentioned absolute positioning fixed, but this won't work with dynamic content.

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 an impossible a difficult coding challenge.. :)

The Call for Aid

Any ideas, fellow programmers?

Answer 1

Since you indicated you don't necessarily care about IE7 support, you can use one of the other techniques (also found in the CSS Tricks link you referenced in your question) to use the display: table and table-cell.

This gives you the same equal height columns regardless of the dynamic content but also allows you to scroll up after clicking an in-page anchor without hiding the content completely out of view.

I really despise using invisible tables for layout purposes but in this case it doesn't force any additional DOM elements by just changing the DIV display attribute values, and isn't really any more hacky than the negative-margin positive-padding approach.

#hold{
    width:100%;
    background:#ccc;
    height:100%;
    display: table;
}
#col1, #col2{
    display: table-cell;
}
#col1{
    width:200px;
    background:#00c;
}
#col2{
    background:#c00;
}

Answer 2

you are tricking the browser but it has a side affect (it breaks the anchor). the best solution would be finding a different method for adjusting the column height but it looks like in that area you've done more research then i anyway.

given the parameters of your question (it seems like you don't want to use JavaScript for design and you don't really want to change the method you use to fix the columns) i'd say the closest you can get to that would be to use your css for design and JavaScript to fix the anchor.

this snippet should work for you

var isScrollFix = false;
document.getElementById('hold').addEventListener('scroll',function(e){
        if(!isScrollFix) {//dont copy our own scroll event onto document
              isScrollFix = true;
              var scrollTo = this.scrollTop;
              this.scrollTop = 0;
              window.scroll(0, scrollTo);
         } else {
              isScrollFix = false;
         }
});

or on jsfiddle with a little extra code to account for other situations as well http://jsfiddle.net/joshK/P72LV/5/