Question

I use a negative margin-bottom to get n DIVs with equal height (I use this method : http://abcoder.com/css/css-equal-height-columns “Three column layout – equal height using pure CSS”)

But this is not working with anchor links.

The top part of div just disappear.

Here is my example : http://club-scpi.com/bug.php

This is so strange ! What am I missing ?

Answer 1

this is not a bug and works as html and css intended

 #container {
    overflow: hidden;
 }

is causing the content inside the div ( when told to go to the anchor point ) to scroll UP to

 <a name="test">

as the overflow is set to hidden, it appears to – disapear.
It is just “hidden”

change to

   #container {
     overflow: auto;
   }

and you will see what is happening.

As an aside, I am not a fan of the this proposed method for creating equal height divs,
( one of the reasons why is what you have just highlighted ) , all depends on what the particular job is.

Alternatives are; the use of background colours, % heights, px heights, or just fab and up front content design considerations before we set to marking up.

Then there is javascript , it can follow up and tidy up boxes here and there in terms of size ( worth looking into also )

… always keep it as simple as possible.