When doing equal height columns in CSS, is there a way to get internal anchor links to still function correctly?

Question

I've used the last example on this page for equal height columns.

http://www.ejeliot.com/blog/61

The problem is, when you click an internal anchor link, the content is shifted up, and the overflow is making the top part of the page disappear.

For example, click this link

http://www.noosanativeplants.com.au/~new/articles/botany-words/

Then click a letter to jump to that section. You will notice what I am describing.

Is there a way to combat this, or is this a short coming of the technique? Do you recommend I use the background image technique for faux equal height columns? I'd rather not use this, as one page has a different background, and would require a bit of reworking to do the background for this page.

Thanks

Answer 1

I really recommend you to use the fail-safe faux columns method. If you are not a layout expert (no offence, seriously), stay away from the padding/margin/overflow magic and the one true layout technique. The latter is elegant but it can cause unwanted side-effects if you are to do heavy JS/DOM manipulations and all (see the problems listing).

As slink said you have two overflow: hidden rules in your css:

#main-container {
  overflow:hidden;
}

And

#content {
  overflow:hidden;
}

If you disable/remove these you will able to use your scrollbars again. Unfortunately the padding / negative margin "hack" will be visible. I recommend you to completely remove this solution and use faux columns. Faux columns background can be added to your #main-content or even the #content div (not just like the example in the ALA article that sets the background image to the body tag).

Good luck!

Update: Sorry, let me correct myself: to use faux columns in your case it is better to set the current background to the html element and the faux background to body element.

Answer 2

Assuming your equal height columns are the left menu and right content in that example, you could just use a margin-left property on the right-column and set the background colour of the container to the desired left-column colour. This would assume your right content always has a greater height than the left, but there are other ways round this.

#container {
width: 960px;
background-color: #000;
}
#menu {
float:left;
width: 240px;
}
#content {
float:right:
margin-left: 240px;
background-color: #fff;
}

<div id="container">
    <div id="menu">
        <ul>
            <li><a href="#">Home</a></li>
        </ul>
    </div>
    <div id="content">
        stuff goes here
    </div>
</div>

Answer 3

The problem is caused by two overflow: hidden; rules defined on elements #content and #main-contaniner.