Fixing the Page Anchors and Content Disappearing Under the Header Problem

Posted by Hans

Last night I discovered that all CSS capable web-browsers would make the page content above an anchor vanish when that anchor was linked to. For example, clicking on the comments link for a blog post would result in all content above the comments section to disappear under the page header. This is rather unpleasant behaviour since it looks unprofessional, and it is impossible to scroll up in order to view the rest of the content. After hours of fault-finding and internet scouring, it turned out to be the "overflow hidden" method that was being used in order to make the sidebar and main content equal in height.

The Problem: Using "Overflow: Hidden" in Order to Obtain Equal Height Columns

CSS offers no direct method of making two columns the same height. If these columns have different colours - as they do on this site - then columns ending at different points looks messy. One commonly used solution is to pad out the bottom of the column with empty space, and then use "overflow: hidden;" in order to hide the extra space. This technique is described here (amongst other places) in more detail. The advantage of this method over others is that it requires no Javascript, or other complex mechanisms, in order to work. Unfortunately it also causes the content above an anchor to vanish when that anchor is the target (e.g., "http://a-website.com/a-paget.html#an-anchor").

The problem with this method is that it creates a large amount of extra space that is hidden from view, but still exists. The overflow attribute gives four options:

• visible - the overflow is simply drawn over the top of other content,
• hidden - the overflow is hidden from view and no scroll-bar is added, so it cannot be reached,
• scroll - a scroll-bar is added so that the extra content can be viewed by scrolling down, and
• auto - the scroll-bar is added only when the content does not fit into its allocated space.

According to this behaviour, setting the overflow to hidden creates a scrollable region without a scroll bar. Unfortunately a browser will correctly scroll down this scrollable region in order to bring that anchor into view. With the scroll bar hidden, there is no way for the user to scroll back up, making the webpage look horrible.

The Solution: A Background Image that Mimics the Column Colours

Obviously the hidden overflow technique of matching columns is not a good method if anchors are present on the page. My solution was to fake the column backgrounds by using an image as background for the enclosing "div." That way the column backgrounds continue to the bottom of the page regardless of where each column ends.

The background image was created by taking a screen grab of the page, and cutting out a single line spanning the width of the content out of the screen-shot. Saving this as a GIF file (be careful with colour conversions) results in an image that matches the columns of the page exactly.

Next, this must be incorporated into the CSS code. This is achieved by adding a single line to the code of the enclosing div,. For example, the extra code for this page's "content-wrap" div is:

background: #F0F0F0 url(../images/content-wrap-bg.gif) repeat-y center top;

Of course, the code for the overflow hack had to be removed but, once done, the result was a website that looked (and still looks) exactly the same as the original, minus the problem of text disappearing when an anchor is used.

This method does have one limitation; it requires that the column widths remain constant, or that only one column varies in size. Changing column widths is also not as straightforward since both the background image and the CSS code for the columns must be modified. Having said that, it is very effective for fixed width layouts, and works around the CSS issues without resorting to Javascript trickery.

Comments (4) | 22 April 2009